D3.js - API Timer

Modul Timer API digunakan untuk melakukan animasi bersamaan dengan penundaan waktu tersinkronisasi. Itu menggunakanrequestAnimationFrameuntuk animasi. Bab ini menjelaskan modul Timer API secara rinci.

requestAnimationFrame

Metode ini memberi tahu browser bahwa Anda ingin melakukan animasi dan meminta browser memanggil fungsi tertentu untuk memperbarui animasi.

Mengonfigurasi Timer

Kita dapat dengan mudah memuat pengatur waktu langsung dari d3js.org dengan menggunakan skrip berikut.

<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script>
   var timer = d3.timer(callback);
</script>

Metode API Timer

Timer API mendukung metode penting berikut. Semua ini dijelaskan secara rinci sebagai berikut.

d3.now ()

Metode ini mengembalikan waktu saat ini.

d3.timer (panggilan balik [, tunda [, waktu]])

Metode ini digunakan untuk menjadwalkan timer baru dan memanggil timer hingga dihentikan. Anda dapat mengatur penundaan numerik di MS, tetapi ini opsional jika tidak, defaultnya ke nol. Jika waktu tidak ditentukan, itu dianggap sebagai d3.now ().

timer.restart (callback [, delay [, time]])

Mulai ulang pengatur waktu dengan panggilan balik yang ditentukan serta penundaan dan waktu opsional.

timer.stop ()

Metode ini menghentikan timer, mencegah callback berikutnya.

d3.timeout (callback [, delay [, time]])

Ini digunakan untuk menghentikan pengatur waktu pada panggilan balik pertamanya. Callback diteruskan sebagai waktu yang telah berlalu.

d3.interval (callback [, delay [, time]])

Itu dipanggil pada interval waktu tunda tertentu. Jika penundaan tidak ditentukan, dibutuhkan waktu pengatur waktu.

Contoh

Buat halaman web "timer.html" dan tambahkan script berikut ke dalamnya.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Timer API </h3>
      <script>
         var timer = d3.timer(function(duration) {
            console.log(duration);
            if (duration > 150) timer.stop();
         }, 100);
      </script>
   </body>
</html>

Kita akan melihat respon berikut di layar.