爲什麼在最後調用回調函數以及如何測試函數？

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>