D3.js - Timer API

Created: November-04, 2018

Timer API 模組用於執行具有同步定時延遲的並發動畫。它使用 requestAnimationFrame 進行動畫製作。本章詳細介紹了 Timer API 模組。

requestAnimationFrame

此方法告訴瀏覽器你希望執行動畫並請求瀏覽器呼叫指定的函式來更新動畫。

配置定時器

我們可以使用以下指令碼直接從 d3js.org 輕鬆載入計時器。

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

計時器 API 方法

Timer API 支援以下重要方法。所有這些都詳細解釋如下。

`d3.now()`

此方法返回當前時間。

`d3.timer(callback[, delay[, time]])`

此方法用於計劃新計時器並呼叫計時器直到停止。你可以在 MS 中設定數字延遲，但它是可選的，否則預設為零。如果未指定時間，則將其視為 d3.now()。

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

使用指定的回撥和可選的延遲和時間重新啟動計時器。

`timer.stop()`

此方法會停止計時器，從而阻止後續回撥。

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

它用於在第一次回撥時停止計時器。回撥作為經過的時間傳遞。

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

它在特定的時間延遲間隔上呼叫。如果未指定延遲，則需要計時器時間。

例

建立一個網頁 timer.html 並將以下指令碼新增到其中。

<!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>

我們將在螢幕上看到以下響應。

定時器 API