by Observable

外觀

d3-timer ​

此模組提供一個有效率的佇列，能夠管理數千個並行動畫，同時保證並行或分階段動畫具有一致且同步的計時。內部使用 requestAnimationFrame 進行流暢的動畫（如果可用），並在延遲時間超過 24 毫秒時切換至 setTimeout。

now() ​

原始碼 · 傳回目前的 time，定義為 performance.now（如果可用），否則為 Date.now。

js
d3.now() // 1236.3000000715256

目前的 time 會在畫面的開頭更新；因此，在畫面中是一致的，且在同一個畫面中排定的任何計時器都會同步。如果此方法是在畫面外呼叫的，例如回應使用者事件時，目前的 time 會被計算並固定到下一個畫面，再次確保在事件處理期間具有一致的計時。

timer(callback, delay, time) ​

原始碼 · 排定一個新的計時器，重複呼叫指定的 callback，直到計時器 停止。可以指定一個可選的數字 delay（以毫秒為單位），以便在延遲後呼叫指定的 callback；如果未指定 delay，則預設為 0。延遲時間相對於指定的 time（以毫秒為單位）；如果未指定 time，則預設為 now。

回呼會傳遞自計時器啟動以來（明顯的）經過時間。例如

js
const t = d3.timer((elapsed) => {
  console.log(elapsed);
  if (elapsed > 200) t.stop();
}, 150);

這會產生大約以下的控制台輸出

3
25
48
65
85
106
125
146
167
189
209

（確切的值可能會因你的 JavaScript 執行環境和你電腦正在執行的其他工作而異。）請注意，第一個經過時間為 3 毫秒：這是自計時器啟動以來的經過時間，而不是自計時器排程以來的經過時間。這裡的計時器在排程後 150 毫秒啟動，這是因為指定的延遲。如果頁面在背景執行，而 requestAnimationFrame 已暫停，則明顯的經過時間可能會小於實際的經過時間；在背景中，明顯的時間會凍結。

如果 計時器 在另一個計時器的回呼中被呼叫，則新的計時器回呼（如果符合指定的延遲和時間所決定的資格）將會在當前畫面結束時立即被呼叫，而不是等到下一個畫面。在一個畫面中，計時器回呼保證會按照它們被排程的順序被呼叫，無論它們的開始時間為何。

計時器.restart(回呼, 延遲, 時間) ​

原始碼 · 使用指定的回呼和可選的延遲和時間重新啟動計時器。這等於停止此計時器並使用指定的引數建立一個新的計時器，儘管此計時器會保留原始的呼叫優先順序。

計時器.stop() ​

原始碼 · 停止此計時器，防止後續的回呼。如果計時器已經停止，則此方法不會產生任何效果。

timerFlush() ​

原始碼 · 立即呼叫任何符合資格的計時器回呼。請注意，零延遲計時器通常會在一個畫面（~17 毫秒）後才第一次執行。這可能會造成短暫的閃爍，因為瀏覽器會渲染頁面兩次：一次在第一個事件迴圈結束時，然後在第一次計時器回呼時立即再次渲染。透過在第一個事件迴圈結束時清除計時器佇列，你可以立即執行任何零延遲計時器並避免閃爍。

timeout(回呼, 延遲, 時間) ​

原始碼 · 與 計時器 相同，但計時器會在第一次回呼時自動停止。這是一個適合替換 setTimeout 的方法，保證不會在背景中執行。回呼會傳遞經過時間。

interval(callback, delay, time) ​

來源 · 與 timer 相似，但只有每隔 delay 毫秒才會呼叫 callback；如果未指定 delay，則等同於 timer。取代 setInterval 的合適替換，保證不會在背景執行。callback 會傳遞經過時間。