في لغة JavaScript، تُستخدم خصائص التوقيت (Timing) لتنفيذ كود معين في وقت محدد أو بشكل متكرر على فترات زمنية. هناك دالتان رئيسيتان للتعامل مع التوقيت في JavaScript:

1. setTimeout():

تُستخدم لتنفيذ دالة معينة مرة واحدة بعد تأخير زمني محدد.

  • الصيغة:
JavaScript
setTimeout(function, milliseconds, param1, param2, ...);

  • function: الدالة التي سيتم تنفيذها.

  • milliseconds: التأخير الزمني بالمللي ثانية (1000 مللي ثانية = 1 ثانية).

  • param1, param2, ...: معاملات اختيارية يتم تمريرها إلى الدالة.

  • مثال:

JavaScript
function greet(name) {
  console.log("مرحباً، " + name + "!");
}

setTimeout(greet, 3000, "أحمد"); // سيتم طباعة "مرحباً، أحمد!" بعد 3 ثوانٍ
  • إيقاف setTimeout(): يُمكن إيقاف تنفيذ setTimeout() باستخدام الدالة clearTimeout()، حيث تحتاج إلى مُعرّف (ID) التوقيت الذي تم إرجاعه بواسطة setTimeout().
JavaScript
let timerId = setTimeout(greet, 3000, "أحمد");

clearTimeout(timerId); // سيتم إلغاء التوقيت ولن يتم تنفيذ الدالة greet

2. setInterval():

تُستخدم لتنفيذ دالة معينة بشكل متكرر على فترات زمنية محددة.

  • الصيغة:
JavaScript
setInterval(function, milliseconds, param1, param2, ...);

  • function: الدالة التي سيتم تنفيذها.

  • milliseconds: الفاصل الزمني بين مرات التنفيذ بالمللي ثانية.

  • param1, param2, ...: معاملات اختيارية يتم تمريرها إلى الدالة.

  • مثال:

JavaScript
function showTime() {
  let now = new Date();
  console.log(now.toLocaleTimeString());
}

setInterval(showTime, 1000); // سيتم عرض الوقت الحالي كل ثانية
  • إيقاف setInterval(): يُمكن إيقاف تنفيذ setInterval() باستخدام الدالة clearInterval()، حيث تحتاج أيضًا إلى مُعرّف (ID) التوقيت الذي تم إرجاعه بواسطة setInterval().
JavaScript
let intervalId = setInterval(showTime, 1000);

clearInterval(intervalId); // سيتم إيقاف التكرار

ملاحظات مهمة:

  • يتم تنفيذ الدوال المُمررة إلى setTimeout() و setInterval() بشكل غير متزامن (asynchronously). هذا يعني أن الكود التالي سيستمر في التنفيذ دون انتظار انتهاء التوقيت.
  • يجب الانتباه إلى استخدام clearInterval() لإيقاف setInterval() عند الحاجة، لتجنب استمرار تنفيذ الدالة إلى ما لا نهاية واستهلاك موارد النظام.
  • قد يكون هناك بعض الاختلافات الطفيفة في دقة التوقيت بسبب عوامل مختلفة مثل أداء المتصفح وحِمل النظام.
  • يُمكن استخدام requestAnimationFrame() لتحسين الأداء في بعض الحالات، خاصةً عند التعامل مع الرسوم المتحركة والتحديثات المتكررة على الشاشة. تعمل requestAnimationFrame() بالتزامن مع معدل تحديث الشاشة، مما يُحسن من سلاسة الحركة.

مثال على requestAnimationFrame():

JavaScript
let element = document.getElementById('myElement');
let xPosition = 0;

function animate() {
  xPosition += 5;
  element.style.left = xPosition + 'px';

  if (xPosition < 500) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

باختصار، تُوفر خصائص التوقيت في JavaScript أدوات قوية لتنفيذ الكود في أوقات محددة أو بشكل متكرر، مما يُمكن من إنشاء تطبيقات ويب تفاعلية وديناميكية. من المهم فهم كيفية استخدام setTimeout() و setInterval() و clearInterval() و requestAnimationFrame() بشكل صحيح لتحقيق أفضل أداء وتجنب المشاكل المحتملة.