0Pricing
JavaScript Academy · درس

setTimeout وsetInterval وانحراف المؤقت

جدوِلوا المهام لمرة واحدة والمتكررة باستخدام setTimeout وsetInterval، وتعلّموا أسلوبًا بسيطًا لتقليل انحراف المؤقت

setTimeout وsetInterval وانحراف المؤقت درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

مقدمة إلى المؤقتات

الهدف: جدولة العمل بطريقة منظمة.

  • setTimeout: التشغيل لاحقًا (مرة واحدة)
  • setInterval: التشغيل بشكل متكرر
  • الانحراف: سبب تأخر المؤقتات
  • إصلاح بسيط للانحراف
setTimeout وsetInterval وانحراف المؤقت — رسم توضيحي 1

setTimeout — لمرة واحدة

ينفذ setTimeout(fn, ms) مرة واحدة بعد التأخير، مع توقيت أدنى وليس توقيتًا دقيقًا.

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout وsetInterval وانحراف المؤقت — رسم توضيحي 2

setInterval — بشكل متكرر

يكرر setInterval التنفيذ تلقائيًا؛ استخدموا clearInterval(id) لإيقافه.

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout وsetInterval وانحراف المؤقت — رسم توضيحي 3

شاهدوا الانحراف أثناء حدوثه

تختلف الفواصل الزمنية الفعلية؛ ويتسبب العمل وحمل الجهاز وحلقة الأحداث في حدوث انحراف.

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout وsetInterval وانحراف المؤقت — رسم توضيحي 4

الجدولة المتزامنة

حاذوا التنفيذ مع وقت متوقّع يتقدم باستمرار: احسبوا التأخير التالي انطلاقًا منه لتجنب تراكم الخطأ.

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout وsetInterval وانحراف المؤقت — رسم توضيحي 5

نصائح وقائمة تحقق

نصائح:

  • احرصوا دائمًا على استخدام clearInterval عند الانتهاء.
  • فضّلوا حلقات setTimeout المتزامنة للحفاظ على وتيرة ثابتة.
  • اجعلوا استدعاءات المؤقت قصيرة لتقليل الانحراف.
setTimeout وsetInterval وانحراف المؤقت — رسم توضيحي 6

اختبار إصلاح الانحراف

تحقق سريع: تقليل الانحراف.

setTimeout وsetInterval وانحراف المؤقت — رسم توضيحي 7

مراجعة

مراجعة: استخدموا setTimeout للتنفيذ مرة واحدة، وsetInterval للتكرار مع تذكر إيقافه، وقللوا الانحراف بمحاذاة عمليات التشغيل التالية مع الأوقات المتوقعة.

setTimeout وsetInterval وانحراف المؤقت — رسم توضيحي 8

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

هل درس «setTimeout وsetInterval وانحراف المؤقت» مجاني؟

نعم — نص درس «setTimeout وsetInterval وانحراف المؤقت» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

ماذا ستتعلم في «setTimeout وsetInterval وانحراف المؤقت»؟

جدوِلوا المهام لمرة واحدة والمتكررة باستخدام setTimeout وsetInterval، وتعلّموا أسلوبًا بسيطًا لتقليل انحراف المؤقت تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «setTimeout وsetInterval وانحراف المؤقت»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. setTimeout وsetInterval وانحراف المؤقت
  2. Debounce مقابل Throttle — بالتنفيذ اليدوي
  3. توقيت التحريك — مقدمة عن الحلقات المعتمدة على الوقت
← العودة إلى JavaScript Academy