شرح الدالة setTimeout() في JavaScript: كيفية ضبط مؤقت أو تأخير التنفيذ لثوانٍ محددة

ما هي الدالة setTimeout() في JavaScript؟

تُعد الدالة setTimeout() من الدوال المضمّنة في JavaScript، وتُستخدم لتنفيذ جزء معيّن من الشيفرة بعد مرور مدة زمنية محددة. وبعبارة أبسط، يمكنك اعتبارها وسيلة لضبط مؤقت يسمح بتشغيل دالة أو أمر برمجي لاحقاً بدلاً من تنفيذه فوراً.

هذه الدالة مفيدة جداً في سيناريوهات عديدة، مثل:

• تأخير ظهور رسالة للمستخدم.
• تنفيذ إجراء بعد انتهاء تحميل عنصر معيّن.
• إنشاء تأثيرات تفاعلية في الواجهة.
• محاكاة الانتظار لعدد من الثواني داخل تدفق التنفيذ.

كيفية استخدام setTimeout() في JavaScript

عند استخدام setTimeout()، فإنك تمرر إليها دالة ليتم تنفيذها بعد مدة زمنية تُقاس بوحدة milliseconds، أي أجزاء الألف من الثانية.

يوضح المثال التالي الفكرة بشكل مباشر:

setTimeout(function () {
  console.log("Hello World");
}, 2000);

console.log("setTimeout() example...");

في هذا المثال، سيُطبع النص setTimeout() example... أولاً في وحدة التحكم، ثم بعد مرور ثانيتين ستتم طباعة Hello World. السبب في ذلك أن setTimeout() لا توقف تنفيذ بقية الشيفرة، بل تقوم بجدولة التنفيذ لوقت لاحق.

الصيغة العامة للدالة setTimeout()

setTimeout(function, milliseconds, parameter1, parameter2, ...);

وتتكون هذه الصيغة من العناصر التالية:

• function: الدالة التي تريد تنفيذها لاحقاً.
• milliseconds: مدة الانتظار قبل التنفيذ.
• parameter1 وparameter2: معاملات إضافية يمكن تمريرها إلى الدالة عند الحاجة.

تمرير دالة مباشرة أو استخدام دالة مسماة

يمكنك كتابة الدالة مباشرة داخل setTimeout()، أو يمكنك تمرير مرجع إلى دالة مسماة. وغالباً ما يكون استخدام الدالة المسماة أوضح وأسهل في القراءة عندما تكبر الشيفرة.

function greeting() {
  console.log("Hello World");
}

setTimeout(greeting);

في المثال السابق، تم تمرير الدالة greeting كمرجع، وليس كنتيجة استدعاء. وهذا فرق مهم جداً لفهم آلية عمل setTimeout().

تحديد مدة الانتظار بالمللي ثانية

المعامل الثاني في setTimeout() هو الزمن الذي تنتظره JavaScript قبل تنفيذ الدالة. يجب الانتباه إلى أن ثانية واحدة تساوي 1000 مللي ثانية، وثلاث ثوانٍ تساوي 3000 مللي ثانية.

function greeting() {
  console.log("Hello World");
}

setTimeout(greeting, 3000);

هنا سيتم تنفيذ الدالة greeting بعد مرور 3 ثوانٍ.

أما إذا حذفت المعامل الثاني، فإن setTimeout() ستقوم بجدولة التنفيذ فوراً تقريباً، من دون انتظار فعلي ملحوظ.

تمرير معاملات إلى الدالة داخل setTimeout()

تدعم setTimeout() تمرير معاملات إضافية إلى الدالة التي ستُنفذ لاحقاً. ويكون ذلك مفيداً عندما تحتاج إلى استخدام قيم متغيرة داخل الدالة.

function greeting(name, role) {
  console.log(`Hello, my name is ${name}`);
  console.log(`I'm a ${role}`);
}

setTimeout(greeting, 3000, "Nathan", "Software developer");

بعد 3 ثوانٍ، ستُنفذ الدالة greeting مع القيمتين Nathan وSoftware developer.

لماذا لا نمرر الاستدعاء مباشرة؟

قد يبدو للوهلة الأولى أنه يمكن كتابة الاستدعاء بهذه الصورة:

setTimeout(greeting("Nathan", "Software developer"), 3000);

لكن هذا الأسلوب غير صحيح إذا كان الهدف هو التأخير، لأنك هنا لا تمرر مرجع دالة، بل تنفذ الدالة فوراً ثم تمرر ناتجها إلى setTimeout(). لذلك ستعمل الدالة مباشرة من دون انتظار.

القاعدة المهمة هنا هي:

• مرّر function reference إذا أردت التنفيذ لاحقاً.
• لا تمرّر function call إذا كنت تريد التأخير الزمني.

كيفية إلغاء تنفيذ setTimeout() باستخدام clearTimeout()

في بعض الحالات قد تحتاج إلى إلغاء المؤقت قبل أن ينفذ الدالة، وهنا يأتي دور clearTimeout(). لكي تتمكن من الإلغاء، يجب أولاً حفظ القيمة التي تعيدها setTimeout()، وهي غالباً معرّف للمؤقت.

clearTimeout(id);

في هذا السياق، يمثل id المعرف الذي تُرجعه setTimeout() عند إنشائها.

مثال عملي على الإلغاء

const timeoutId = setTimeout(function () {
  console.log("Hello World");
}, 2000);

clearTimeout(timeoutId);

console.log(`Timeout ID ${timeoutId} has been cleared`);

في هذا المثال، تم إنشاء مؤقت لتشغيل الرسالة بعد ثانيتين، لكن جرى إلغاؤه مباشرة باستخدام clearTimeout(). لذلك لن تُطبع Hello World أبداً.

إذا كان لديك أكثر من مؤقت، فمن الأفضل حفظ كل معرّف في متغير مستقل، ثم استدعاء clearTimeout() لكل واحد ترغب في إلغائه.

متى تستخدم setTimeout() فعلياً؟

رغم أن الفكرة تبدو بسيطة، فإن استخدام setTimeout() شائع جداً في تطوير الواجهات والتطبيقات التفاعلية. ومن أبرز الحالات العملية:

• تأخير إخفاء رسالة نجاح أو تنبيه.
• تشغيل إجراء بعد تفاعل المستخدم بفترة قصيرة.
• إضافة تأخير مقصود قبل تنفيذ طلب أو تحديث واجهة.
• محاكاة سلوك الانتظار في أمثلة تعليمية واختبارات بسيطة.

ملاحظات مهمة لفهم السلوك بشكل صحيح

• الدالة setTimeout() لا توقف تنفيذ البرنامج بالكامل، بل تؤجل تنفيذ جزء محدد فقط.
• القيمة الزمنية تُحسب بالمللي ثانية، وليس بالثواني مباشرة.
• تمرير الدالة يختلف تماماً عن تمرير نتيجة استدعائها.
• إلغاء المؤقت يتطلب حفظ المعرّف الناتج من setTimeout().

ملخص سريع

إذا أردت تنفيذ دالة بعد مدة زمنية محددة، فاستخدم setTimeout(). وإذا احتجت إلى إلغاء هذا التنفيذ قبل حدوثه، فاستخدم clearTimeout() مع المعرّف الذي أعادته الدالة عند الإنشاء.

الخلاصة التقنية

تُعد setTimeout() من الأدوات الأساسية لفهم التوقيت وجدولة التنفيذ في JavaScript. ورغم بساطتها، فإن استيعاب الفرق بين تمرير مرجع الدالة واستدعائها مباشرة يمنع كثيراً من الأخطاء الشائعة. أما استخدام clearTimeout() فيمنحك تحكماً أكبر في سلوك الواجهة وتجربة المستخدم، خصوصاً في التطبيقات التفاعلية التي تعتمد على التوقيت والاستجابة السريعة.