المؤقتات في لغة JavaScript

أهلاً بك! اليوم رح نتكلم عن المؤقتات في JavaScript، وهي أدوات مهمة جداً للتحكم في توقيت تنفيذ الكود. بدون كثرة كلام، خلينا ندخل بالموضوع مباشرة.

1. setTimeout() - نفّذ مرة واحدة بعد فترة

هذي الدالة تخليك تنفذ كود معين مرة واحدة فقط بعد مرور فترة زمنية محددة (بالمللي ثانية).

شكلها كذا:


setTimeout(function() {
  // الكود اللي تبغى تنفذه
}, delayInMilliseconds);

// أو باستخدام دالة سهمية (Arrow Function)
setTimeout(() => {
  // الكود هنا
}, delayInMilliseconds);

مثال بسيط:


console.log("الرسالة الأولى");

setTimeout(() => {
  console.log("الرسالة هذي بتظهر بعد ثانيتين!");
}, 2000); // 2000 مللي ثانية = 2 ثانية

console.log("الرسالة الثانية");

ملاحظة: setTimeout ترجع لك معرف (ID) تقدر تستخدمه عشان تلغي المؤقت قبل ما يتنفذ، وهذي وظيفة clearTimeout().

2. clearTimeout() - إلغاء مؤقت setTimeout

لو شغلت setTimeout وبغيت تلغيه قبل ما يتنفذ، تستخدم clearTimeout() وتعطيها المعرف اللي رجعته لك setTimeout.

شكلها كذا:


let timerId = setTimeout(() => {
  console.log("هذي الرسالة ما راح تظهر!");
}, 5000);

// بعد فترة قصيرة، قررنا نلغي المؤقت
clearTimeout(timerId);

console.log("تم إلغاء المؤقت بنجاح.");

3. setInterval() - نفّذ بشكل متكرر

على عكس setTimeout اللي تنفذ الكود مرة واحدة، setInterval() تخليك تنفذ كود معين بشكل متكرر كل فترة زمنية محددة.

شكلها كذا:


setInterval(function() {
  // الكود اللي تبغى تنفذه كل فترة
}, intervalInMilliseconds);

مثال: عداد يطبع رقم كل ثانية:


let counter = 0;
const intervalId = setInterval(() => {
  counter++;
  console.log(العداد: ${counter});
  if (counter >= 5) {
    clearInterval(intervalId); // نوقف العداد لما يوصل 5
    console.log("تم إيقاف العداد.");
  }
}, 1000); // كل ثانية

ملاحظة: setInterval أيضاً ترجع لك معرف (ID) تقدر تستخدمه عشان توقف التكرار، وهذي وظيفة clearInterval().

4. clearInterval() - إيقاف مؤقت setInterval

عشان توقف setInterval من التكرار، تستخدم clearInterval() وتعطيها المعرف اللي رجعته لك setInterval.

شف المثال اللي فوق مع setInterval()، استخدمنا clearInterval(intervalId) عشان نوقف العداد بعد 5 مرات.

نصائح سريعة ومهمة:

  • الدقة: المؤقتات في JavaScript ليست دقيقة 100%، يعني لو طلبت تنفيذ كود بعد 1000ms، ممكن يتنفذ بعد 1001ms أو 1005ms حسب حمل النظام.
  • this في المؤقتات: انتبه لقيمة this داخل الكولباك (Callback) إذا كنت تستخدم دوال عادية. دوال الأسهم (Arrow Functions) تحافظ على قيمة this من السياق المحيط بها، وهذي ميزة حلوة.
  • الاستخدام الصحيح: استخدم setTimeout للأشياء اللي تتنفذ مرة واحدة، وsetInterval للأشياء المتكررة زي تحديث ساعة أو عداد.

هذا كان درس سريع ومباشر عن المؤقتات في JavaScript. أتمنى يكون الشرح واضح ومفيد!