D3.js - 定時器 API

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>

Timer API 方法

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

d3.now()

此方法返回當前時間。

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

此方法用於安排新的定時器，並呼叫定時器直到停止。您可以設定以毫秒為單位的數字延遲，但它是可選的，否則預設為零。如果未指定時間，則將其視為 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>

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

列印頁面