d3-timer

该模块提供了一个高效的队列，能够管理数以千计的并发动画，同时保证一致的、同步的并发或分段动画的计时。在内部，它对流体动画（如果可用）使用requestAnimationFrame，对延迟超过24ms的使用setTimeout。

Installing

如果你使用npm，请键入npm install d3-timer。否则，请下载最新版本。你也可以直接从d3js.org加载，作为standalone library（独立库）或D3 4.0的一部分来使用。支持AMD，CommonJS和vanilla环境。在vanilla环境下，会输出一个全局的d3：

<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script>

var timer = d3.timer(callback);

</script>

API Reference

d3.now()

返回由performance.now（如果可用的话）或Date.now定义的当前时间。当前时间是在帧开始时更新的，因此在帧期间是连续的，并且在同一帧中排定的任何计时器都是同步的。如果此方法在帧外调用，例如响应用户事件，则计算当前时间，然后固定到下一帧，再次确保在事件处理期间一致的计时。

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

排定一个新的计时器，反复调用给定的callback，直到计时器停止为止。可以指定一个毫秒数delay，以在延迟后调用给定的callback；如果不指定delay，则默认为0。延迟与给定的time（毫秒）有关；如果不指定time，则默认为现在。

callback是通过定时器激活后的（明显的）elapsed（消逝）时间来实现的。例如:

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

控制台大致会输出以下内容：

（具体值会根据你的JavaScript运行环境或电脑的正在做什么而变化。）注意：第一次消逝时间是3ms：这是计时器启动后的消逝时间，而不是计时器被排定的消逝时间。因为指定了延迟，这里的计时器将在排定150ms后启动。如果页面在后台运行并且requestAnimationFrame暂停了，则明显消逝时间会短于实际消逝时间；在后台中，明显时间会被冻结。

如果在一个计时器的callback中调用另一个计时器，则将在当前帧的结尾立即调用新计时器的回调函数（如果符合指定的延迟和时间），而不是等到下一帧。在一帧内，计时器回调函数都会按照排定的顺序调用，而不管他们的开始时间。

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

用指定的callback和可选的delay和time重新启动计时器。这相当于停止此计时器并创建具有给定参数的新计时器，尽管此计时器保留原始调用优先级。

timer.stop()

停止此定时器，防止后续回调。如果计时器已经停止，此方法没有作用。

d3.timerFlush()

立即调用任何符合条件的定时器回调。值得注意的是，零延迟定时器通常在一帧后第一个执行（~ 17ms）。这会引起短暂的闪烁，因为浏览器渲染了两次页面：第一次在事件循环结束后，第二次在第一个计时器回调中。通过在第一个事件循环结束时刷新计时器队列，你可以立即运行任何零延迟计时器，并避免闪烁。

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

和timer一样，除了计时器在第一次回调时自动停止。保证setTimeout不在后台运行的合适的替代品。callback传递消逝的时间。

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

与timer一样，除了每次延迟毫秒才调用callback；如果没有指定delay，这相当于timer。保证setInterval不在后台运行的合适的替代，是保证不在后台运行。callback传递消逝的时间。

Timers (d3-timer)