JavaScript والمزيد: 4 طرق إبداعية لقياس الوقت في المتصفحات

استخدام حلقة متزامنة غير محدودة في عامل الويب (وليس في عامل الخدمة)

v المزايا

1. دقة قابلة للتحقيق معبّر عنها بالميكروثانية.
2. .
3. , , . - .
4. . , setInterval, terminate , . MDN : « terminate() Worker . , ».

▍

1. على الرغم من أن هذه الطريقة تجعل من الممكن العمل مع فترات زمنية أقل من مللي ثانية ، فإن إرسال الرسائل إلى سلسلة الرسائل الرئيسية يعمل بشكل غير متزامن. أي أنه من المستحيل تنفيذ إجراءات معينة في التيار الرئيسي بنفس الدقة التي يتم بها اتخاذ القرار في العامل الذي يحتاج إلى تنفيذ هذه الإجراءات.
2. تقوم هذه الطريقة بتحميل الدفق بالكامل ، مما قد يؤدي إلى زيادة استهلاك البطارية على الهواتف.
3. تتطلب هذه الطريقة دعم عمال الويب.
4. لا تتوقف الحلقة اللانهائية في عامل الويب مؤقتًا إذا كانت علامة التبويب المرتبطة بها غير نشطة.

استخدام الرسوم المتحركة CSS للأحداث المتعلقة بالوقت (على وجه الخصوص - الرسوم المتحركة)

v المزايا

1. توقف مؤقتًا تلقائيًا إذا أصبحت علامة تبويب المتصفح غير نشطة. في هذه الحالة ، فإن الحدث الذي يهمنا ببساطة لا يحدث. لذلك ، لا داعي للقلق بشأن حل مشكلة معالجة العديد من الأحداث التي تراكمت خلال الوقت الذي كانت فيه علامة التبويب غير نشطة ثم تم تنشيطها.
2. div DOM. , React-, , . div .
3. , , . — :
   
   

   .addEventListener("animationiteration", fun).

4. animation-delay.

▍

1. . , , .
2. الاعتماد على DOM و CSSOM. قد تؤثر قواعد CSS الأخرى على تلك التي تصف الرسوم المتحركة. لذلك ، أنصحك بأن تنشئ لتنظيم المؤقت نوعًا من العلامات غير المسماة سابقًا بشكل عشوائي مثل <just-a-timer-element></<just-a-timer-element>. ربما - هل يستحق إنشاء عنصر مخصص ، يتم داخله إخفاء رمز الرسوم المتحركة لـ CSS؟ (كل هذه أفكار مثيرة للجدل ، في الواقع).
3. لا تعمل هذه الطريقة إذا كان العنصر يحتوي على نمط display: none;.
4. عدم دقة. وفقًا لاختباراتي ، يمكن أن تكون دقة العد التنازلي حوالي 1 مللي ثانية. يمكنك ، لمعرفة كيفية عملها بالضبط ، أن تجرب مثالًا ، وهو الرابط الموضح أدناه.

استخدام علامة svg (الرسوم المتحركة SMIL)

<svg>
  <rect>
    <animate
      attributeName="rx"
      values="0;1"
      dur="1s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

v المزايا

1. تعمل هذه الطريقة حتى إذا تم تعيين نمط لعنصر SVG display: none;.
2. يتوقف العد التنازلي تلقائيًا عند إزالة عنصر SVG من DOM.
3. لا يبدأ إنشاء الأحداث حتى يتم تحميل الصفحة بالكامل.
4. يتم إيقاف "المؤقت" تلقائيًا إذا أصبحت علامة التبويب غير نشطة.

▍ مساوئ

1. كما هو الحال في حساب الفترات الزمنية باستخدام الرسوم المتحركة CSS ، قد يبدو تطبيق هذه الطريقة غير مفهومة للمبرمجين الآخرين.
2. الاعتماد على DOM و CSSOM. هذا هو - لدينا هنا نفس الميزات غير المرغوب فيها التي تم وصفها بالفعل لطريقة حساب الوقت باستخدام الرسوم المتحركة CSS. وهي - إمكانية تعطيل "المؤقت" بسبب قواعد CSS الأخرى.
3. إنه غير مدعوم في IE و Edge (حتى يتم نقل المتصفح من Microsoft إلى Chromium).
4. عدم دقة. وفقًا لاختباراتي ، يمكن أن تكون انحرافات مثل هذا المؤقت عن الطريقة الأكثر دقة مؤثرة للغاية 15 مللي ثانية. يمكنك التحقق من ذلك بنفسك من خلال تجربة المثال ، الرابط الموضح أدناه.
5. لا يبدأ العد التنازلي حتى يتم تحميل الصفحة بالكامل. صحيح أن هذا "الطرح" من هذه الطريقة قد يكون "زائد" في بعض المواقف.

استخدام واجهة برمجة تطبيقات Web Animations

function ownSetTimeout(callback, duration) {
  const div = document.createElement('div');

  const keyframes = new KeyframeEffect(div, [], { duration, iterations: 1 });

  const animation = new Animation(
    keyframes,
    document.timeline
  );

  animation.play();

  animation.addEventListener('finish', () => {
    callback();
  });
}

v المزايا

1. حل قائم بذاته لا يتطلب التفاعل مع DOM.
2. مبرمج غير مألوف مع هذا النهج سيفهم بسهولة معنى الرمز المطابق.
3. يتوقف "المؤقت" مؤقتًا على علامة تبويب غير نشطة.

▍ مساوئ

1. Web Animations API - التكنولوجيا لا تزال تجريبية. لا تستخدمه في الإنتاج.
2. دعم متصفح ضعيف للغاية. من المحتمل أن تعمل هذه الطريقة فقط في Chromium.
3. مع كل مزايا هذا الحل ، فإنه ، مع ذلك ، قد يبدو لشخص بعيد عن الحدس.
4. قد تتحول حقيقة أن "المؤقت" متوقف مؤقتًا على علامة تبويب غير نشطة إلى ناقص لهذا الحل إذا تم استخدامه كبديل setTimeout.
5. لا يمكن استخدام هذه الطريقة لحساب الفواصل الزمنية. حدث فقط متاح للمبرمج onfinish.
6. دقة منخفضة. وفقًا لتجاربي ، يمكن أن يكون الخطأ بسهولة ± 5 مللي ثانية.

علاوة

ملخص