javascript - Chrome 中的回调执行时间与预期不符

Question

This blog post解释 JavaScript 执行的幕后工作原理。它描述了堆栈、事件循环、回调队列和 Web API 上下文。

我尝试了以下示例:

function main() {
  setTimeout( () => alert('World') , 1000 ); // don't dismiss this alert for about 5 seconds
  setTimeout( () => alert('Mars') , 5000 );
}

main();

我希望两个计时器并行运行。一旦我消除第一个警报，下一个警报就会立即出现。这是 Firefox 和 Edge 中的行为。但在 Chrome 中，第二个警报在第一个警报消除后 5 秒出现。没有预料到。

这是 Chrome 实现的问题吗？ Chrome 是否正在尝试进行一些优化？

版本:Firefox Quantum 61.0.1、Chrome 69.0.3497.100、Edge 42.17134.1.0

Answer 1

JS 的特性之一是执行环境不同，您似乎对可用的不同引擎很了解。

在 Chrome 中，alert 是一种阻塞方法，它将停止执行。

考虑这个例子:

(() => {
  for (let i = 0; i < 10; i++) {
    setTimeout(() => console.log(i), i*1000)
  }
  setTimeout(() => alert('World'), 1000)
  setTimeout(() => alert('Mars'), 5000)
})()

您将看到计数器停止并在警报解除后恢复。但是，您的期望是正确的，JS 通常被认为是非阻塞的，并且通常情况下，诸如 setTimeout 之类的方法会异步运行(例如在for 循环，其中必须递增计时器才能实现所需的行为)。