d3-timer, 用于管理数千个并发动画的高效队列

分享于 

6分钟阅读

GitHub

  繁體 雙語
An efficient queue capable of managing thousands of concurrent animations.
  • 源代码名称:d3-timer
  • 源代码网址:http://www.github.com/d3/d3-timer
  • d3-timer源代码文档
  • d3-timer源代码下载
  • Git URL:
    git://www.github.com/d3/d3-timer.git
    Git Clone代码到本地:
    git clone http://www.github.com/d3/d3-timer
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/d3/d3-timer
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    d3-timer

    这个模块提供了一个高效的队列,可以管理数千个并发动画,同时保证一致的。同步的时间和。 在内部,它使用 流动画( 如果可用的话),切换到 setTimeout延迟超过毫秒。

    安装

    如果你使用 NPM,npm install d3-timer。 否则,下载最新版本的。 你也可以直接从 d3js.org 加载,或者作为一个独立库,或者作为D3 4.0的一部分。 支持 AMD,CommonJS和香草环境。 在vanilla中,导出了一个 d3 全局:

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

    在浏览器中尝试 d3-timer。

    API参考

    # d3.now() <>

    如果可用,则返回由 performance.now 定义的当前时间,如果没有,则返回 Date.now。 当前的时间是在帧的开头更新的,因这里在帧中的任何计时器都会同步。 如果在框架之外调用这里方法,如响应用户事件,当前时间将被计算,然后再次确保事件处理。

    # d3.timer(callback [, delay[, time] ]) <>

    在重复计时之前,调度一个新的计时器,调用指定的回调直到计时器停止工作。 如果延迟延迟可以指定一个可选的数字延迟以毫秒为单位调用给定的回调;如果没有指定延迟延迟,则默认为零。 如果指定的时间为毫秒,则延迟为指定的超时时间( 以毫秒为单位) ;如果未指定时间戳,则默认为现在的

    自计时器激活后,回调被传递到( 明显) 时间 elapsed。 例如:

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

    这将大致产生以下控制台输出:

    
    3
    
    
    25
    
    
    48
    
    
    65
    
    
    85
    
    
    106
    
    
    125
    
    
    146
    
    
    167
    
    
    189
    
    
    209
    
    
    
    

    你的JavaScript运行时间和计算机正在执行的操作可能会有所不同请注意,第一次经过的时间是 3毫秒: 这是自计时器启动以来所经过的时间,而不是计时器调度的时间。 由于指定的延迟,这里计时器在调度后启动了 150ms。 在 background and时间可能小于 true 时间,如果页面是backgrounded和 requestAnimationFrame 暂停,则在中,视时间被冻结。

    在另一个计时器的回调内调用计时器时,将立即在当前帧的末尾调用新计时器回调( 如有资格,如有规定,可以按规定的时间延迟,延迟时间和时间来决定。),而不是等到下一个帧结束时才调用。 在帧内,计时器回调被保证按他们调度的顺序调用,不管它们的开始时间如何。

    # timer.restart(callback [, delay[, time] ]) <>

    使用指定的回调 and optional delay和时间重新启动定时器。 这等效于停止这里计时器并创建具有指定参数的新计时器,尽管这里计时器保留原始调用优先级。

    # timer.stop() <>

    停止这里计时器,防止后续回调。 如果计时器已经停止,则这里方法无效。

    # d3.timerFlush() <>

    立即调用任何合格的计时器回调。 注意,零延迟计时器通常在一个帧( ~17ms ) 之后执行。 由于浏览器呈现页面两次,因此这可能会导致短暂的闪烁: 在第一个事件循环的末尾,然后再次在第一个计时器回调上。 通过在第一个事件循环的末尾刷新计时器队列,可以立即运行任何零延迟计时器,并避免闪烁。

    # d3.timeout(callback [, delay[, time] ]) <>

    就像定时器,除了计时器自动停止,在它的第一个回调时停止。 适用于 setTimeout的适当替换,保证不会在 background 中运行。 回调传递经过的时间。

    # d3.interval(callback [, delay[, time] ]) <>

    计时器一样,除了回调调用 every callback delay delay delay延迟 milliseconds specified specified delay timer equivalent equivalent timer。 适用于 setInterval的适当替换,保证不会在 background 中运行。 回调传递经过的时间。


    相关文章