مقدمة عن المؤقتات (Timers)
تُعتبر المؤقتات (Timers) من الأدوات المهمة في JavaScript التي تمكنك من تنفيذ الأكواد بعد فترة زمنية محددة أو بشكل متكرر على فترات زمنية معينة. يتم ذلك باستخدام الوظائف الأساسية setTimeout و setInterval، بالإضافة إلى الوظائف المرتبطة مثل clearTimeout و clearInterval لإيقاف تنفيذ هذه المؤقتات.
المؤقتات تُستخدم عادةً لإنشاء تأثيرات ديناميكية، مثل تأخير تنفيذ العمليات، تحديث محتوى الصفحة بشكل دوري، أو التحكم في تشغيل التطبيقات.
setTimeout: تنفيذ الكود بعد فترة زمنية محددة
تُستخدم setTimeout لتنفيذ دالة واحدة أو جزء من الكود بعد مرور فترة زمنية محددة (بالميلي ثانية). يتم تنفيذ الكود مرة واحدة فقط.
الصيغة الأساسية:
setTimeout(function, delay, param1, param2, ...);
function: الدالة أو الكود الذي سيتم تنفيذه.delay: مدة التأخير قبل تنفيذ الكود (بالميلي ثانية).param1, param2, ...: المعاملات التي يمكن تمريرها إلى الدالة.
مثال:
setTimeout(() => {
console.log('مرّت 3 ثواني!');
}, 3000); // تنفيذ الكود بعد 3 ثوانٍ
تمرير دوال مخصصة مع معاملات:
function greet(name) {
console.log(`مرحباً، ${name}!`);
}
setTimeout(greet, 2000, 'أحمد'); // سيتم تنفيذ الدالة greet بعد ثانيتين
setInterval: تنفيذ الكود بشكل متكرر
تُستخدم setInterval لتكرار تنفيذ كود معين على فترات زمنية محددة. سيستمر التنفيذ حتى يتم إيقافه باستخدام clearInterval.
الصيغة الأساسية:
setInterval(function, interval, param1, param2, ...);
function: الدالة أو الكود الذي سيتم تنفيذه بشكل متكرر.interval: مدة التكرار بين كل تنفيذ (بالميلي ثانية).param1, param2, ...: المعاملات التي يمكن تمريرها إلى الدالة.
مثال:
setInterval(() => {
console.log('كل ثانيتين!');
}, 2000); // تنفيذ الكود كل ثانيتين
تحديث محتوى الصفحة باستخدام setInterval:
let counter = 0;
const intervalId = setInterval(() => {
counter++;
console.log(`العداد: ${counter}`);
if (counter === 5) {
clearInterval(intervalId); // إيقاف التكرار بعد 5 مرات
console.log('تم إيقاف العداد');
}
}, 1000);
إيقاف المؤقتات باستخدام clearTimeout و clearInterval
clearTimeout: إيقاف مؤقت خاص بـ setTimeout
يمكنك إلغاء تنفيذ الكود إذا كان مؤقت setTimeout لا يزال ينتظر انتهاء مدة التأخير.
مثال:
const timeoutId = setTimeout(() => {
console.log('لن يتم تنفيذ هذا الكود');
}, 5000);
// إلغاء المؤقت قبل انتهاء الخمس ثوانٍ
clearTimeout(timeoutId);
console.log('تم إلغاء المؤقت');
clearInterval: إيقاف التكرار الخاص بـ setInterval
يمكنك إيقاف التنفيذ المتكرر باستخدام clearInterval.
مثال:
let counter = 0;
const intervalId = setInterval(() => {
console.log(`التكرار: ${counter}`);
counter++;
if (counter > 3) {
clearInterval(intervalId); // إيقاف التكرار بعد 3 مرات
console.log('تم إيقاف التكرار');
}
}, 1000);
تطبيقات عملية على المؤقتات
تأخير ظهور عنصر في الصفحة باستخدام setTimeout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delayed Element</title>
</head>
<body>
<h1 id="message" style="display: none;">مرحباً بكم!</h1>
<script>
setTimeout(() => {
document.getElementById('message').style.display = 'block';
}, 3000); // ظهور النص بعد 3 ثوانٍ
</script>
</body>
</html>
إنشاء ساعة رقمية باستخدام setInterval:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
</head>
<body>
<h1 id="clock"></h1>
<script>
setInterval(() => {
const now = new Date();
const time = now.toLocaleTimeString();
document.getElementById('clock').textContent = time;
}, 1000); // تحديث الساعة كل ثانية
</script>
</body>
</html>
ملاحظات مهمة
- تحديد وقت مناسب: عند استخدام المؤقتات، تأكد من أن الفترات الزمنية مناسبة للتطبيق، حيث أن القيم الصغيرة جدًا قد تؤثر على الأداء.
- إيقاف المؤقتات: احرص دائمًا على استخدام
clearTimeoutوclearIntervalلإيقاف المؤقتات غير الضرورية لمنع حدوث تسريبات في الذاكرة. - تجنب التأخير الزائد: قد تؤدي عمليات تأخير كبيرة باستخدام
setTimeoutإلى تجارب استخدام سيئة، خاصةً إذا كانت تفاعلات المستخدم تعتمد عليها.
خاتمة
المؤقتات مثل setTimeout و setInterval تعتبر أدوات قوية وضرورية لإنشاء تطبيقات ويب ديناميكية وفعّالة. فهم كيفية استخدامها بشكل صحيح، مع معرفة كيفية إيقافها عند الحاجة باستخدام clearTimeout و clearInterval، يمكن أن يساعدك على تحسين أداء تطبيقاتك وتوفير تجربة مميزة للمستخدمين.
اكتشاف المزيد من كود التطور
اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.
