你如何在d3.js中设置定期计时器？

Question

我想每5分钟运行一次特定的功能.如果我写这样的代码:

function f() {
    console.log("hi");
    d3.timer(f, 5*60*1000);
    return true;
}

d3.timer(f, 5*60*1000);

然后f似乎运行一次,然后再也没有.

我通过创建一个f名为f2:fcalls d3.timer(f2)和f2call 的克隆来实现所需的行为d3.timer(f).这看起来像一个丑陋的黑客.有没有更好的办法？

Answer 1

我认为@ nrabinowitz的答案可能是最好和最简单的,但是如果你真的想使用d3.timer,那么你就是这样做的.

var interval = 1000; // one second in milliseconds

var makeCallback = function() {
    // note that we're returning a new callback function each time
    return function() {
        console.log('OH HAI!!');
        d3.timer(makeCallback(), interval);
        return true;
    }
};

d3.timer(makeCallback(), interval);

你的代码没有按预期工作,因为d3.js将定时器映射到函数实例(参见这里的代码:https://github.com/mbostock/d3/blob/master/d3.v2.js#L4073),所以你的代码正在执行以下操作:

1. 使用回调设置计时器 f()
2. f() 在五分钟后被召唤
3. f()记录到控制台,创建一个新的计时器,它也f()用作其回调,然后通过返回取消该计时器true.

我的回答中的代码通过每次返回一个新的函数实例来解决问题.

当然,这是更复杂,更难理解,只是使用setInterval,所以你应该这样做.

Answer 2

这听起来像标准JavaScript setInterval()方法的工作:

setInterval(f, 5*60*1000);

如果您需要它在每次调用时运行动画,那么这d3.timer将是有用的 - 否则,标准setInterval和setTimeout方法可能会更容易.