أعلم أن أجهزة ضبط الوقت كانت لفترة من الوقت ميزة يستخدمها الكثير من الأشخاص في مهامهم اليومية. في عالم JavaScript، غالبًا ما يتم تنفيذ المؤقتات باستخدام وظائف setTimeout أو setInterval، والخبر السيئ بالنسبة لك إذا كنت تفعل ذلك هو أنها ليست ممارسة جيدة وسأحاول شرح السبب.

قبل أن أبدأ في شرح فكرتي، لدي سؤال لك: هل يمكنك استخدام ساعة تعطي الوقت الخطأ؟

إذا كانت إجابتك بنعم، فأنا آسف لإضاعة وقتك الثمين لأن هذا المقال لا يخصك.

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

المشكلة مع هذه الوظائف

للبدء، دعونا نفكر في المقتطف التالي

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i 


إذا قمت بتشغيل هذا المقتطف في وحدة تحكم المتصفح، فستحصل على النتيجة التالية 



يرجع هذا السلوك إلى حقيقة أن setTimeout يضيف رد الاتصال في قائمة انتظار المتصفح بحيث يجب معالجته بمجرد أن يكون خاملاً (ليس لديه مهمة للقيام بها) بمعنى آخر رد الاتصال تم تمريره إلى setTimeout له أولوية منخفضة

 الآن، بعد معرفة ذلك، أتصور أنه سيكون من الصعب عليك تنفيذ المؤقتات باستخدام وظيفة setTimeout لأنه يمكن أن يكون لديك علامتين أو حتى 10 علامات (اعتمادًا على مدى انشغال متصفحك) في نفس الوقت. سيكون تصحيح الأخطاء بمثابة كابوس، لكن هل لدينا حل أفضل؟

  
  
  طريقة لتجنب هذه الوظائف


لتوفير طريقة أفضل لتنفيذ المؤقتات، يجب علينا استخدام وظيفة requestAnimationFrame لأنها تطلب من المتصفح تنفيذ رد اتصال قبل الطلاء التالي (بمعنى آخر قبل حدوث أي تغيير في واجهة المستخدم)

الفرق هنا دقيق جدًا، لذا من الأفضل فهمه من خلال الكود. دعونا نستعيد مقتطفنا السابق ونعدله قليلاً لمقارنة setTimeout و requestAnimationFrame

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


في هذا المثال، يمكننا أن نرى أنه عند التشغيل على Chrome، يتم تشغيل setTimeout قبل requestAnimationFrame (على الرغم من حدوث العكس في بعض الحالات النادرة)



ولكن إذا قمت بتشغيله على Firefox، فسيكون هذا هو الإخراج



 قد يبدو هذا مربكًا ولكن إذا انتبهت قليلًا، ستدرك أنه لا تحدث أي لوحة أثناء التنفيذ، لذا فإن كيفية التعامل مع هذا السيناريو تعتمد على المتصفح.

الآن إذا تمكنا من تعديل المقتطف الخاص بنا لجعل المتصفح يعيد رسم الصفحة، فلنرى ما سيحدث

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


إليك الإخراج على Chrome



وهنا هو الناتج في فايرفوكس



كما ترون في السجلات، عندما يقوم المتصفح بإجراء تغييرات في واجهة المستخدم، ستكون لوظيفة requestAnimationFrame دائمًا الأولوية على عمليات الاسترجاعات المجدولة الأخرى.

 نظرًا لأننا نجري عمليات إعادة طلاء باستمرار على الويب، فإن requestAnimationFrame يعد خيارًا واضحًا لتنفيذ المؤقتات.

  
  
  فهم وظيفة requestAnimationFrame


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

سترجع الدالة عددًا صحيحًا يمثل معرف الطلب، وقد يكون هذا مفيدًا إذا كنت ترغب في إلغاء الطلب باستخدام وظيفة CancelAnimationFrame.

  
  
  تنفيذ بسيط لساعة الإيقاف في JavaScript


لتنفيذ ساعة توقيت، هناك بعض المتطلبات:

• يجب أن نعرف بعد أي مقدار من الوقت يجب أن تظهر علامة (عادةً ثانية)
• يجب أن نعرف التأخير الزمني الذي يجب أن تتوقف بعده ساعة الإيقاف عن الإشارة
• يجب أن تكون الفترات الزمنية أقل من التأخير

مع أخذ كل هذه المتطلبات في الاعتبار، سيعمل مقتطف الكود التالي على إنشاء ساعة توقيت لك

خاتمة

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

شكرًا لقراءتك وإلى اللقاء؟