JavaScript dan lainnya: 4 pendekatan kreatif untuk mengukur waktu di browser

Menggunakan loop sinkron tak terbatas di pekerja web (bukan pekerja layanan)

▍ Keuntungan

1. Akurasi yang dapat dicapai dinyatakan dalam mikrodetik.
2. .
3. , , . - .
4. . , setInterval, terminate , . MDN : « terminate() Worker . , ».

▍

1. Meskipun metode ini memungkinkan untuk bekerja dengan interval waktu yang kurang dari satu milidetik, mengirim pesan ke utas utama berfungsi secara sinkron. Artinya, tidak mungkin untuk melakukan tindakan tertentu di utas utama dengan akurasi yang sama dengan yang pekerja memutuskan bahwa tindakan ini perlu dilakukan.
2. Metode ini sepenuhnya memuat aliran, yang dapat menyebabkan peningkatan konsumsi baterai pada ponsel.
3. Metode ini memerlukan dukungan pekerja web.
4. Loop tak terbatas dalam pekerja web tidak berhenti jika tab yang terkait dengannya tidak aktif.

Menggunakan animasi CSS untuk acara yang berkaitan dengan waktu (khususnya - animasi)

▍ Keuntungan

1. Secara otomatis berhenti jika tab browser menjadi tidak aktif. Dalam hal ini, peristiwa yang menarik bagi kami tidak terjadi. Karena itu, Anda tidak perlu khawatir tentang penyelesaian masalah pemrosesan banyak peristiwa yang telah terakumulasi selama waktu ketika tab tidak aktif dan kemudian diaktifkan.
2. div DOM. , React-, , . div .
3. , , . — :
   
   

   .addEventListener("animationiteration", fun).

4. animation-delay.

▍

1. . , , .
2. Ketergantungan pada DOM dan CSSOM. Aturan CSS lainnya dapat memengaruhi yang menjelaskan animasi. Oleh karena itu, saya menyarankan Anda untuk membuat untuk organisasi timer semacam tag acak yang sebelumnya tidak ada seperti nama <just-a-timer-element></<just-a-timer-element>. Mungkin - apakah perlu membuat elemen kustom, di mana kode animasi CSS disembunyikan dengan rapi? (semua ini adalah ide yang cukup kontroversial, sebenarnya).
3. Metode ini tidak berfungsi jika elemen memiliki gaya display: none;.
4. Ketidaktelitian. Sesuai dengan tes saya, akurasi hitungan mundur bisa sekitar 1 ms. Anda, untuk mengetahui bagaimana cara kerjanya untuk Anda, dapat bereksperimen dengan sebuah contoh, tautan yang diberikan di bawah ini.

Menggunakan tag svg (Animasi SMIL)

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

▍ Keuntungan

1. Metode ini berfungsi bahkan jika gaya ditugaskan ke elemen SVG display: none;.
2. Hitung mundur secara otomatis berhenti ketika elemen SVG dihapus dari DOM.
3. Pembuatan acara tidak dimulai sampai halaman dimuat sepenuhnya.
4. "Timer" secara otomatis dijeda jika tab menjadi tidak aktif.

▍ Kerugian

1. Seperti dalam kasus penghitungan interval waktu menggunakan animasi CSS, penerapan metode ini mungkin tampak tidak dapat dipahami oleh programmer lain.
2. Ketergantungan pada DOM dan CSSOM. Yaitu - di sini kita memiliki fitur yang tidak diinginkan yang sama yang telah dijelaskan untuk metode penghitungan waktu menggunakan animasi CSS. Yaitu - kemungkinan gangguan "timer" karena aturan-CSS lainnya.
3. Itu tidak didukung di IE dan Edge (sampai browser ditransfer dari Microsoft ke Chromium).
4. Ketidaktelitian. Sesuai dengan pengujian saya, penyimpangan timer seperti itu dari metode yang paling akurat bisa sangat mengesankan 15 milidetik. Anda dapat memverifikasi ini sendiri dengan bereksperimen dengan contoh, tautan yang diberikan di bawah ini.
5. Hitung mundur tidak dimulai sampai halaman terisi penuh. Benar, "minus" metode ini dapat berubah menjadi "plus" dalam beberapa situasi.

Menggunakan API Animasi Web

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();
  });
}

▍ Keuntungan

1. Solusi mandiri yang tidak memerlukan interaksi dengan DOM.
2. Seorang programmer yang tidak terbiasa dengan pendekatan ini akan dengan mudah memahami arti dari kode yang sesuai.
3. "Timer" berhenti pada tab yang tidak aktif.

▍ Kerugian

1. API Animasi Web - teknologinya masih eksperimental. Jangan menggunakannya dalam produksi.
2. Dukungan browser sangat buruk. Metode ini kemungkinan hanya berfungsi di Chromium.
3. Dengan semua kelebihan dari solusi ini, bagaimanapun, itu mungkin tampak bagi seseorang yang jauh dari intuitif.
4. Fakta bahwa "timer" dijeda pada tab tidak aktif dapat berubah menjadi minus dari solusi ini jika digunakan sebagai alternatif setTimeout.
5. Metode ini tidak dapat digunakan untuk menghitung interval. Hanya acara yang tersedia untuk programmer onfinish.
6. Akurasi rendah. Menurut percobaan saya, kesalahan dapat dengan mudah ± 5 milidetik.

Bonus

Ringkasan