为什么在最后调用回调函数以及如何测试函数？

Question

我有下面的功能，这是调用按钮单击，然后调用另一个函数内的定时器。

下面是代码：

<button id="starter">Start</button> 

JS：

document.getElementById ("starter").addEventListener ("click", myFunction, false); 

function myFunction() { 
    var start = new Date().getTime(); 
    console.log("Start", start); 
    d3.timer(() => { 
    var timepassed = new Date().getTime() - start; 
    console.log("Time elapsed", timepassed); 
    helloBlah(timepassed); 
    if(timepassed >= 200) return true; 
    }); 
    console.log(" Why am I triggered first rather than the timer?"); 
} 

function helloBlah(e){ 
    console.log("Hello Blah"); 
} 

这里是JSFiddle。

为什么d3计时器和里面的函数晚于它下面的控制台消息被调用？我如何在控制台消息之前调用它，以及如何在Jasmine中为这些类型的函数编写测试？

Answer 1

这是预期的行为。

D3定时器不同于setTimeout和setInterval：除了别的以外，它们在页面背景停止时停止。

然而，就像当你使用一个setTimeout 0毫秒发生什么事，你看到的行为是由事实来解释设置最小延迟并不意味着该功能将被执行立即：它只是意味着它将在当前正在执行的代码完成后立即执行。

我们可以使用d3.timeout（不存在于v3中，仅在v4中）显示此内容，这与d3.timer仅被调用一次不同。看一看控制台：

d3.select("button").on("click", function() { 
 
    d3.timeout(function() { 
 
    console.log("I'm inside d3.timeout, I should come first!") 
 
    }); 
 
    console.log("I'm outside d3.timeout and after it") 
 
    console.log("I'm outside d3.timeout and after it too") 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<button>Click Me</button>