setInterval 相对于事件循环的行为

Question

尝试找出为什么以下代码的输出是这样的

console.log("Start");

setInterval(function() {
    console.log("setInterval");
}, 5000);

let date = new Date();
while(new Date() - date <= 10000) {}

console.log("End");

实际产量

• 开始
• ...10秒....
• 结束
• 设置间隔
• ...5秒....
• 设置间隔

由于 while 块会阻塞主线程 10 秒，因此 setInterval 的回调函数应该被推送到任务队列中两次，因为它有一个 5 秒的定时器。所以输出应该是

预期输出

• 开始
• ...10秒....
• 结束
• 设置间隔
• 设置间隔
• ...5秒....
• 设置间隔

Answer 1

while 会阻塞线程，即使 setInterval 是异步的并且之前写过。

这是因为 javascript 是在单线程上运行的，所以如果你启动一个非异步的长代码，它会在运行期间阻塞线程。