javascript - JavaScript 回调是否阻塞？

Question

如果我向事件监听器注册了一个耗时的回调函数，并且这个事件在短时间内触发了两次。第二次回调会不会被第一次回调阻塞？

我在浏览器中试过这个:

document.body.onclick = function() {
    var date = new Date;
    console.log('click event at ' + date);

    while(new Date - date < 1e4) {};

    console.log('callback end');
}

结果，在第一个回调完成后立即执行第二个回调。

所以现在我对 JavaScript 非阻塞异步模块感到困惑:异步执行了哪些部分？

Answer 1

浏览器中的 Javascript 是单线程的，并在事件队列中运行。在触发下一个事件之前，一个事件将运行完成。因此，如果在第一次点击仍在处理时发生第二次点击，则第二次点击将排队并且不会运行，直到处理第一次点击的代码完成。

您可以在此处阅读有关此事件队列概念的更多信息:

How does JavaScript handle AJAX responses in the background?

---

在您的特定示例中，一旦您的代码开始运行，它就是同步的。 while 循环一直运行到完成并处于阻塞状态(阻止任何其他 Javascript 运行直到它完成)。

有一些异步方法可以安排一些代码在将来运行(使用 setTimeout() 或 setInterval())，这将允许其他代码同时运行，但您没有使用该机制。