التحكم في التوقيت في JavaScript: setTimeout و setInterval و clearInterval

ليس كل كود يجب أن يعمل فوراً. أحياناً تحتاج تأخيراً بسيطاً قبل التنفيذ، أو تكراراً كل ثانية. هنا تظهر أدوات Timing في JavaScript.

في هذا الدرس ستتعلم متى تستخدم setTimeout ومتى تستخدم setInterval، وكيف توقفهما بطريقة صحيحة.

قاعدة أساسية: الوقت بالميلي ثانية

• 1000 = ثانية واحدة
• 2000 = ثانيتان
• 5000 = خمس ثوان

1) setTimeout() للتنفيذ مرة واحدة بعد تأخير

setTimeout(function () {
  console.log("تم التنفيذ بعد 3 ثوان");
}, 3000);

ماذا يفعل هذا الكود؟ ينتظر 3 ثوان ثم ينفذ الدالة مرة واحدة.

النتيجة المتوقعة: الرسالة تظهر لاحقاً وليس فوراً.

خطأ شائع: الاعتقاد أن setTimeout يوقف كل البرنامج؛ هو فقط يجدول تنفيذ الدالة.

2) clearTimeout() لإلغاء التنفيذ المؤجل

const timeoutId = setTimeout(function () {
  console.log("لن تظهر هذه الرسالة");
}, 4000);

clearTimeout(timeoutId);

ماذا يفعل هذا الكود؟ يلغي الـ timeout قبل موعد التنفيذ.

النتيجة المتوقعة: الدالة لا تعمل أبداً.

خطأ شائع: عدم حفظ المعرف في متغير، فلا يمكن إلغاء المهمة لاحقاً.

3) setInterval() للتنفيذ المتكرر

const intervalId = setInterval(function () {
  console.log("كل ثانية");
}, 1000);

ماذا يفعل هذا الكود؟ يشغل نفس الدالة كل ثانية بشكل مستمر.

النتيجة المتوقعة: تكرار الرسالة حتى الإيقاف اليدوي.

خطأ شائع: نسيان إيقافه فيستمر بلا نهاية ويؤثر على الأداء.

4) clearInterval() لإيقاف التكرار

let count = 0;

const intervalId = setInterval(function () {
  count++;
  console.log(`Tick ${count}`);

  if (count === 5) {
    clearInterval(intervalId);
    console.log("تم الإيقاف");
  }
}, 1000);

ماذا يفعل هذا الكود؟ ينشئ عداداً يتكرر 5 مرات ثم يتوقف.

النتيجة المتوقعة: رسائل من Tick 1 إلى Tick 5 ثم توقف.

خطأ شائع: استدعاء clearInterval بمعرف غير صحيح أو داخل نطاق غير متاح.

مثال تطبيقي: رسالة تختفي بعد وقت

const notice = document.querySelector(".notice");

setTimeout(function () {
  notice.style.display = "none";
}, 2500);

ماذا يفعل هذا الكود؟ يخفي رسالة تنبيه بعد 2.5 ثانية.

النتيجة المتوقعة: تجربة مستخدم أنظف بدون تدخل يدوي.

خطأ شائع: اختيار عنصر غير موجود فينتج خطأ عند محاولة تعديله.

مثال مهم: Debounce بسيط للبحث

let searchTimer;

input.addEventListener("input", function () {
  clearTimeout(searchTimer);

  searchTimer = setTimeout(function () {
    console.log("إرسال طلب البحث بعد توقف الكتابة");
  }, 400);
});

ماذا يفعل هذا الكود؟ يؤخر تنفيذ البحث حتى يتوقف المستخدم عن الكتابة قليلاً.

النتيجة المتوقعة: تقليل عدد الطلبات وتحسين الأداء.

خطأ شائع: عدم استخدام clearTimeout فتعمل عدة طلبات متراكمة.

Story قصيرة: عداد لا يتوقف

مطور مبتدئ أنشأ setInterval لعداد تنازلي لكنه نسي clearInterval عند الوصول للصفر. النتيجة: القيم استمرت بالسالب. بعد إضافة شرط إيقاف واضح، أصبح السلوك صحيحاً.

مقارنة سريعة

Checklist سريعة

• أعرف أن الوقت في JavaScript يقاس بالميلي ثانية.
• أستخدم setTimeout للتنفيذ مرة واحدة.
• أستخدم setInterval للتكرار مع شرط إيقاف.
• أحفظ معرّف المؤقت لإلغائه لاحقاً.

الأسئلة الشائعة — FAQ

ما الفرق بين setTimeout و setInterval؟

الأولى تعمل مرة واحدة بعد تأخير، والثانية تعمل بشكل متكرر كل مدة.

كيف أوقف setInterval؟

احفظ القيمة الراجعة في متغير ومررها إلى clearInterval.

هل 1000 تعني ثانية؟

نعم، 1000 ميلي ثانية = 1 ثانية.

للمراجعة: Input Validation. للمتابعة: Math.