setInterval和一个事件循环

时间:2016-01-18 02:27:33

标签: javascript asynchronous callback

假设我有一些setInterval调用,以10ms作为参数。我启动它,并有一些JavaScript代码需要25毫秒才能完成。 10ms后,第一个间隔回调排队。在20ms之后,没有其他任何排队因为(我假设的Web API逻辑,如果这是setInterval滴答发生的地方,则决定这一点)setInterval的一个实例已经排队。< / p>

现在,在25ms时,当主逻辑完成时,setInterval启动,并且它需要10ms完成(所以当它完成时,35ms将从程序执行中通过)。在30ms,当setInterval回调在堆栈中并执行时,会发生另一个滴答。现在发生了什么?另一个setInterval回调队列实例是否会进入事件队列?或者浏览器环境是否会看到堆栈中有一个间隔实例正在执行并跳过将新实例推送到事件队列,从而使下一个setInterval实例在40ms 最后推送a新的回调?

1 个答案:

答案 0 :(得分:0)

正如评论中提到的,JavaScript是单线程的。为了证明这一点,我测试了这段代码:

var count = 0;
var interval = setInterval(function() {
    if (count >= 5) {
        clearInterval(interval);
        return;
    }

    var start = Date.now();
    var number = ++count;
    console.log("Call #" + number + " begin: " + start);

    // Delay for 250 ms
    while (Date.now() - start < 250) {}

    var end = Date.now();
    console.log("Call #" + number + " end: " + end + " Interval: " + (end - start));
}, 1);

它输出:

Call #1 begin: 1453087997262
Call #1 end: 1453087997512 Interval: 250
Call #2 begin: 1453087997522
Call #2 end: 1453087997772 Interval: 250
Call #3 begin: 1453087997777
Call #3 end: 1453087998027 Interval: 250
Call #4 begin: 1453087998027
Call #4 end: 1453087998277 Interval: 250
Call #5 begin: 1453087998277
Call #5 end: 1453087998527 Interval: 250

如果JavaScript是多线程的,输出看起来更像是:

Call #1 begin
Call #2 begin
Call #3 begin
Call #4 begin
Call #5 begin
// Approximate 245-250ms delay
Call #1 end Interval: 250
Call #2 end Interval: 250
Call #3 end Interval: 250
Call #4 end Interval: 250
Call #5 end Interval: 250

JSFiddle演示:https://jsfiddle.net/Hatchet/126kkjwh/