المؤقتات والجدولة
المؤقتات (Timers) والجدولة (Scheduling) في JavaScript هي أدوات قوية تسمح لنا بالتحكم في توقيت تنفيذ التعليمات البرمجية. الفكرة ببساطة أنك تستطيع أن تقول للبرنامج: "نفّذ هذا الكود بعد وقت محدد" أو "كرّر هذا الكود كل فترة زمنية". هذه الآلية مهمة جداً في التطبيقات الحديثة لأنها تجعل التجربة أكثر تفاعلية وديناميكية.
في موقع إخباري مثلاً، يمكن استخدام المؤقتات لتحديث الأخبار كل دقيقة تلقائياً بدون أن يضطر المستخدم لتحديث الصفحة. في موقع للتجارة الإلكترونية، يمكن عرض عدٍّ تنازلي (Countdown) لانتهاء عرض معين. في الصفحة الشخصية يمكن تشغيل رسالة ترحيبية بعد ثوانٍ من تحميل الصفحة، وفي البوابة الحكومية يمكن جدولة التحقق من حالة الطلب كل فترة زمنية.
لتقريب الفكرة أكثر، تخيّل أنك تكتب رسالة (مثل وظيفة برمجية) وتضعها في ظرف، ثم تحدد وقت إرسالها بالبريد: هذا هو المؤقت. أو تخيل أنك تنظّم مكتبة وتقرر أن تفحص الكتب كل ساعة لتحديث حالتها: هذه هي الجدولة. مثل بناء بيت، حيث تحدد أوقاتاً مختلفة لوصول العمال: بعضهم يأتي يومياً، وآخرون مرة واحدة.
في هذا الدرس ستتعلم كيف تنشئ مؤقتات وجدولة باستخدام setTimeout و setInterval، كيف تتحكم في تدفق التنفيذ، وكيف تتجنب الأخطاء الشائعة، مع أمثلة عملية في سياقات مختلفة.
مثال أساسي
javascript// مثال أساسي باستخدام setTimeout و setInterval
// تنفيذ رسالة واحدة بعد 3 ثوانٍ
setTimeout(() => {
console.log("تم تنفيذ الكود بعد 3 ثوانٍ");
}, 3000);
// تكرار رسالة كل ثانيتين
let counter = 0;
let interval = setInterval(() => {
counter++;
console.log("رسالة مكررة رقم " + counter);
if (counter === 3) clearInterval(interval); // إيقاف بعد 3 مرات
}, 2000);الكود السابق يعرض لنا المفهوم الأساسي للمؤقتات (setTimeout) والجدولة (setInterval).
أولاً: الدالة setTimeout تستقبل معاملين أساسيين: الأول هو دالة (Function) تُنفذ بعد فترة زمنية، والثاني هو عدد المللي ثانية (Milliseconds). في المثال، طلبنا تنفيذ رسالة في console بعد 3000 مللي ثانية أي 3 ثوانٍ. هذا يشبه أن تقول "أرسل هذه الرسالة بعد وقت معين". لاحظ أن setTimeout ينفّذ مرة واحدة فقط، ثم يتوقف تلقائياً.
ثانياً: الدالة setInterval تشبه setTimeout لكنها تُكرر التنفيذ بشكل دوري. في المثال، طلبنا طباعة رسالة كل 2000 مللي ثانية (أي كل ثانيتين). استعملنا متغير counter لتتبع عدد المرات، ولمنع التكرار اللانهائي أضفنا شرطاً باستخدام if: عندما يصبح العداد مساوياً لـ 3 نستدعي clearInterval لإيقاف المؤقت. هذا يشبه موظف يقوم بمراجعة مكتبة كل ساعتين، لكن بعد 3 مرات نقول له "توقف".
من الناحية العملية، هذه البنية مفيدة جداً: في موقع إخباري يمكننا تحديث آخر الأخبار باستمرار عبر setInterval. في متجر إلكتروني يمكن إيقاف عدٍّ تنازلي بعد انتهاء 3 جولات من التحقق. من المهم ملاحظة أن الدوال المستخدمة هنا غير متزامنة (Asynchronous) أي أنها لا توقف تنفيذ بقية الكود أثناء الانتظار، بل تسمح للبرنامج بالاستمرار. هذا مفيد للحفاظ على الأداء وتجربة مستخدم سلسة.
مثال عملي
javascript// مثال عملي: عد تنازلي لعرض في متجر إلكتروني
let timeLeft = 5; // 5 ثوانٍ كمدة للعرض
let countdown = setInterval(() => {
console.log("ينتهي العرض خلال: " + timeLeft + " ثوانٍ");
timeLeft--;
if (timeLeft < 0) {
clearInterval(countdown);
console.log("انتهى العرض!"); // هنا قد نغيّر واجهة المستخدم
}
}, 1000);عند التعامل مع المؤقتات والجدولة في المشاريع المتقدمة، هناك بعض الممارسات الجيدة (Best Practices) التي يُفضل اتباعها:
- استخدام الصياغة الحديثة مثل الدوال السهمية (Arrow Functions) لأنها مختصرة وتوضح النية بشكل أفضل.
- دائماً احرص على مسح المؤقتات باستخدام clearTimeout أو clearInterval عندما لا تكون هناك حاجة لها، لتفادي استهلاك غير ضروري للذاكرة.
- راقب الأداء (Performance) إذا كنت تستخدم مؤقتات بكثرة، خاصة في صفحات ثقيلة مثل البوابات الحكومية. من الأفضل تقليل عدد المؤقتات المتزامنة.
-
استخدم try...catch داخل الدوال المجدولة لمعالجة أي أخطاء غير متوقعة حتى لا تنهار العملية بالكامل.
أما الأخطاء الشائعة فهي: -
نسيان مسح المؤقتات مما يؤدي إلى تسريبات في الذاكرة (Memory Leaks).
- وضع setInterval بفاصل زمني قصير جداً مما يستهلك المعالج بشكل مفرط.
- الاعتماد على المؤقتات في عمليات حساسة دون التحقق من الأحداث الأخرى مثل استجابة الخادم.
- كتابة الكود بطريقة تمنع المستخدم من إيقاف العدادات، مما يسبب تجربة سيئة.
لتصحيح الأخطاء، استخدم console.log لفحص سير عمل المؤقتات. جرب إيقافها وتشغيلها بشكل منفصل. كما يمكن الاستعانة بأدوات المتصفح (Developer Tools) لمتابعة الأداء. تذكّر أن الهدف من المؤقتات هو تحسين التفاعل لا إضعاف التجربة.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| setTimeout | تنفيذ دالة بعد وقت محدد مرة واحدة | setTimeout(()=>console.log("Hi"),2000) |
| clearTimeout | إلغاء مؤقت setTimeout | let t=setTimeout(...); clearTimeout(t) |
| setInterval | تكرار تنفيذ دالة كل فترة زمنية | setInterval(()=>console.log("Tick"),1000) |
| clearInterval | إلغاء مؤقت setInterval | let i=setInterval(...); clearInterval(i) |
| Date.now | إرجاع الوقت الحالي بالمللي ثانية | console.log(Date.now()) |
| requestAnimationFrame | بديل متقدم للجدولة لرسوميات | requestAnimationFrame(()=>draw()) |
في هذا الدرس تعرفنا على جوهر المؤقتات (Timers) والجدولة (Scheduling) في JavaScript وكيفية استخدامها بشكل فعّال. الفكرة الرئيسية هي التحكم في "متى" يتم تنفيذ التعليمات البرمجية، سواء مرة واحدة عبر setTimeout أو بشكل متكرر عبر setInterval. تعلمنا كيفية دمج هذه الأدوات مع الشروط والإيقاف الديناميكي لإعطاء مرونة كاملة في إدارة تدفق التطبيق.
المؤقتات ترتبط بشكل وثيق بتحديث واجهة المستخدم (DOM Manipulation)، لأنك غالباً ستغيّر محتوى الصفحة عند اكتمال المؤقت، مثل إظهار رسالة أو تحديث بيانات. كما أنها ترتبط بالتواصل مع الخادم (Backend Communication)، حيث يمكن استخدامها لتكرار طلب البيانات بشكل دوري.
الخطوة التالية المقترحة للمتعلم هي دراسة Promises وAsync/Await لفهم كيفية التعامل مع العمليات غير المتزامنة بطرق أكثر تقدماً. بعدها يمكن التعمق في requestAnimationFrame لتصميم واجهات أكثر سلاسة.
نصيحة عملية: لا تفرط في استخدام المؤقتات، بل اجعلها أداة لخدمة التجربة. راقب الأداء دائماً وتأكد من مسح المؤقتات عند الانتهاء. بهذا ستبني تطبيقات أكثر أماناً، كفاءة، وسهولة في الاستخدام.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى