المؤقتات في JavaScript: setTimeout و setInterval

رسالة «تم الحفظ» تظهر ثم تختفي بعد ثلاث ثوانٍ. ساعة رقمية تتحدث كل ثانية. عدّ تنازلي لنهاية العرض. شريط صور ينتقل تلقائياً. كل هذه تحتاج أن تقول للمتصفح: «نفّذ هذا لاحقاً» أو «نفّذه كل فترة». في هذا الدرس ستتعلم دالتين لذلك، وستفهم معهما أول أسرار JavaScript: كيف تتعامل مع الوقت.

setTimeout: نفّذ بعد مدة

console.log("بدأ البرنامج");

setTimeout(() => {
  console.log("مرّت ثانية");
}, 1000);

الناتج

بدأ البرنامج
مرّت ثانية

setTimeout تأخذ معاملين:

1. دالة تُنفَّذ لاحقاً.
2. مدة الانتظار بالملّي ثانية. كل 1000 ملّي ثانية تساوي ثانية واحدة.

تخيّلها مثل منبّه الهاتف: تضبطه على وقت، وتكمل يومك، وعندما يحين الوقت يرنّ.

المفاجأة: الكود لا ينتظر

ما ناتج هذا الكود؟ توقّعه قبل أن تقرأ الإجابة:

console.log("1");

setTimeout(() => {
  console.log("2");
}, 500);

console.log("3");

الناتج

1
3
2

الرقم 3 طُبع قبل 2! السبب أن setTimeout لا توقف البرنامج. هي تسجّل المنبّه فقط وتعود فوراً، فيكمل البرنامج إلى السطر التالي. وبعد نصف ثانية تُنفَّذ الدالة المؤجلة.

هذا السلوك يسمى غير متزامن (Asynchronous): الكود لا يُنفَّذ بترتيب كتابته. وهو أساس كل ما سيأتي: جلب البيانات من الإنترنت وانتظار المستخدم.

حتى مع صفر

setTimeout(() => {
  console.log("المؤجل");
}, 0);

console.log("العادي");

الناتج

العادي
المؤجل

حتى بمدة صفر تُنفَّذ الدالة المؤجلة بعد انتهاء الكود العادي كله. القاعدة: JavaScript تنهي ما بيدها أولاً، ثم تلتفت إلى ما في قائمة الانتظار.

تخيّل موظفاً واحداً على شباك: يخدم من أمامه حتى ينتهي، ثم ينادي التالي في الطابور. مهما كان التالي مستعجلاً، لن يقطع على من يُخدم الآن. JavaScript تعمل بنفس الطريقة: مهمة واحدة في كل لحظة.

المدة ليست وعداً دقيقاً

المدة التي تكتبها هي الحد الأدنى للانتظار وليست موعداً مضبوطاً. إذا كان البرنامج مشغولاً بمهمة طويلة، تتأخر الدالة المؤجلة حتى ينتهي.

إلغاء المؤقت: clearTimeout

setTimeout تُرجع رقماً يعرّف المؤقت. احفظه إذا أردت الإلغاء لاحقاً:

const timerId = setTimeout(() => {
  console.log("لن أُطبع أبداً");
}, 1000);

clearTimeout(timerId);
console.log("أُلغي المؤقت");

الناتج

أُلغي المؤقت

استخدام شائع: رسالة تختفي بعد 5 ثوانٍ، لكن المستخدم أغلقها بيده قبل ذلك، فتلغي المؤقت حتى لا يحاول إخفاء رسالة غير موجودة.

setInterval: كرّر كل فترة

setTimeout تنفذ مرة واحدة. أما setInterval فتكرر التنفيذ كل فترة إلى أن توقفها:

let count = 0;

const intervalId = setInterval(() => {
  count++;
  console.log("نبضة", count);

  if (count === 3) {
    clearInterval(intervalId);
    console.log("توقف");
  }
}, 200);

الناتج

نبضة 1
نبضة 2
نبضة 3
توقف

• setInterval تُرجع رقماً تعريفياً مثل setTimeout.
• clearInterval توقف التكرار. بدونها يستمر المؤقت إلى الأبد.

	setTimeout	setInterval
عدد مرات التنفيذ	مرة واحدة	يتكرر
الإيقاف	clearTimeout	clearInterval
أمثلة	إخفاء رسالة، تأخير بحث	ساعة، عدّ تنازلي، عرض شرائح

أوقف كل مؤقت تبدؤه

مؤقت متكرر منسيّ يظل يعمل في الخلفية، ويستهلك البطارية والمعالج. والأسوأ أن تضغط الزر مرتين فيعمل مؤقتان معاً، ويتضاعف كل شيء. قبل أن تبدأ مؤقتاً جديداً، أوقف القديم.

تمرير دالة جاهزة

يمكنك إعطاء المؤقت اسم دالة موجودة بدلاً من دالة سهمية:

function sayHello() {
  console.log("أهلاً!");
}

setTimeout(sayHello, 300);

الناتج

أهلاً!

نكتب sayHello بدون أقواس. لو كتبت setTimeout(sayHello(), 300) لنُفِّذت الدالة فوراً، وأُعطي المؤقت ناتجها بدلاً منها.

المشروع: عدّ تنازلي

جرّب بنفسكJavaScript

محرر الكود (JavaScript)const display = document.querySelector("#display"); let seconds = 10; let intervalId = null; function render() { display.textContent = seconds > 0 ? seconds : "انتهى الوقت!"; } function stop() { clearInterval(intervalId); intervalId = null; } document.querySelector("#start").addEventListener("click", () => { if (intervalId !== null || seconds === 0) return; intervalId = setInterval(() => { seconds--; render(); if (seconds === 0) stop(); }, 1000); }); document.querySelector("#stop").addEventListener("click", stop); document.querySelector("#reset").addEventListener("click", () => { stop(); seconds = 10; render(); }); console.log("اضغط ابدأ");

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

اضغط «ابدأ» وراقب الرقم ينقص كل ثانية حتى يصل إلى «انتهى الوقت!».

أهم سطر في المشروع هو أول سطر داخل زر «ابدأ»: if (intervalId !== null || seconds === 0) return;. هذا الشرط يمنع تشغيل مؤقت ثانٍ إذا ضغط المستخدم «ابدأ» مرتين. احذفه مؤقتاً واضغط الزر عدة مرات بسرعة، وشاهد العدّاد يجري بجنون.

ولاحظ نمط render من مشروع العدّاد: البيانات في متغير seconds، ودالة واحدة تعرضها.

جرّب بنفسك

1. غيّر العدّ التنازلي ليبدأ من 30 ثانية.
2. اجعل الرقم يتحول إلى اللون الأحمر عندما يبقى 3 ثوانٍ أو أقل.
3. أضف رسالة تظهر عند انتهاء الوقت، ثم تختفي بعد ثانيتين باستخدام setTimeout.
4. تحدٍّ: حوّل العدّاد إلى ساعة إيقاف تعدّ تصاعدياً، وتعرض الوقت بالشكل 01:25.

أخطاء شائعة

• كتابة الدالة بأقواس: setTimeout(save(), 1000) تنفذ save فوراً. الصحيح setTimeout(save, 1000).
• نسيان clearInterval: المؤقت يعمل بلا نهاية. احفظ الرقم التعريفي وأوقفه عند انتهاء الحاجة.
• توقع أن الكود ينتظر: السطر الذي يلي setTimeout يُنفَّذ فوراً. ما تريد تأجيله ضعه داخل الدالة المؤجلة.

اختبر نفسك

سؤال

كم مرة تُنفَّذ الدالة المعطاة لـ setTimeout؟

لا تُنفَّذ إلا بضغطة زركل ثانية بلا توقفمرة واحدة بعد المدة المحددة

سؤال

بأي ترتيب تُطبع القيم: console.log('أ') ثم setTimeout يطبع 'ب' بمدة 0 ثم console.log('ج')؟

أ ثم ج ثم بأ ثم ب ثم جب ثم أ ثم ج

الخلاصة

• setTimeout تنفذ دالة مرة واحدة بعد مدة بالملّي ثانية.
• setInterval تكرر التنفيذ كل فترة حتى تستدعي clearInterval.
• المؤقتات لا توقف البرنامج: الكود التالي يُنفَّذ فوراً، والمؤجل ينتظر دوره.
• احفظ الرقم التعريفي لتستطيع الإلغاء بـ clearTimeout أو clearInterval.
• لا تبدأ مؤقتاً جديداً قبل التأكد من إيقاف القديم.