اكتشف JavaScript Timers

عند كتابة كود JavaScript ، قد ترغب في تأخير تنفيذ الوظيفة. تعرف على كيفية استخدام setTimeout و setInterval لجدولة الوظائف في المستقبل

setTimeout()

عند الكتابةJavaScriptرمز ، قد ترغب في تأخير تنفيذ وظيفة.

هذه هي وظيفةsetTimeout. أنت تحدد وظيفة رد نداء ليتم تنفيذها لاحقًا ، وقيمة تعبر عن مدى رغبتك في تشغيلها لاحقًا ، بالمللي ثانية:

setTimeout(() => {
  // runs after 2 seconds
}, 2000)

setTimeout(() => { // runs after 50 milliseconds }, 50)

يحدد بناء الجملة هذا وظيفة جديدة. يمكنك استدعاء أي وظيفة أخرى تريدها هناك ، أو يمكنك تمرير اسم وظيفة موجود ومجموعة من المعلمات:

const myFunction = (firstParam, secondParam) => {
  // do something
}

// runs after 2 seconds setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeoutإرجاع معرف جهاز ضبط الوقت. لا يتم استخدام هذا بشكل عام ، ولكن يمكنك تخزين هذا المعرف ، ومسحه إذا كنت تريد حذف تنفيذ الوظيفة المجدولة هذا:

const id = setTimeout(() => {
  // should run after 2 seconds
}, 2000)

// I changed my mind clearTimeout(id)

تأخير صفر

إذا قمت بتحديد مهلة التأخير إلى0، سيتم تنفيذ وظيفة رد الاتصال في أقرب وقت ممكن ، ولكن بعد تنفيذ الوظيفة الحالية:

setTimeout(() => {
  console.log('after ')
}, 0)

console.log(’ before ')

سوف تطبعbefore after.

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

تقوم بعض المتصفحات (IE و Edge) بتطبيق ملفsetImmediate()الطريقة التي تؤدي نفس الوظيفة بالضبط ، ولكنها ليست قياسية وغير متوفر في المتصفحات الأخرى. لكنها وظيفة قياسية في Node.js.

setInterval()

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

setInterval(() => {
  // runs every 2 seconds
}, 2000)

تعمل الوظيفة أعلاه كل ثانيتين ما لم تخبرها بالتوقف ، باستخدامclearInterval، ويمر عليه معرف الفاصل الذيsetIntervalعاد:

const id = setInterval(() => {
  // runs every 2 seconds
}, 2000)

clearInterval(id)

من الشائع الاتصالclearIntervalداخل وظيفة رد الاتصال setInterval ، للسماح لها تلقائيًا بتحديد ما إذا كان يجب تشغيلها مرة أخرى أو إيقافها. على سبيل المثال ، يعمل هذا الرمز على شيء ما لم يكن App.somethingIWait له القيمةarrived:

const interval = setInterval(() => {
  if (App.somethingIWait === 'arrived') {
    clearInterval(interval)
    return
  }
  // otherwise do things
}, 100)

العودية setTimeout

setIntervalيبدأ دالة كل n مللي ثانية ، دون أي اعتبار عند انتهاء الوظيفة من تنفيذها.

إذا كانت الوظيفة تستغرق دائمًا نفس القدر من الوقت ، فلا بأس بذلك:

setInterval working fine

ربما تستغرق الوظيفة أوقات تنفيذ مختلفة ، اعتمادًا على ظروف الشبكة على سبيل المثال:

setInterval varying duration

وربما يتداخل تنفيذ واحد طويل مع التالي:

setInterval overlapping

لتجنب ذلك ، يمكنك جدولة setTimeout العودية ليتم استدعاؤها عند انتهاء وظيفة رد الاتصال:

const myFunction = () => {
  // do something

  setTimeout(myFunction, 1000)
}

setTimeout( myFunction() }, 1000)

لتحقيق هذا السيناريو:

Recursive setTimeout

setTimeoutوsetIntervalمتوفرة فيNode.js، من خلالوحدة الموقتات.

يوفر Node.js أيضًا ملفاتsetImmediate()، وهو ما يعادل استخدامsetTimeout(() => {}, 0)، تستخدم في الغالب للعمل مع Node.js Event Loop.


المزيد من دروس js: