了解 Javascript 事件循环和代码执行答案

【问题标题】：Understanding Javascript Event loop and code execution了解 Javascript 事件循环和代码执行
【发布时间】：2014-10-10 01:21:14
【问题描述】：

我在理解 Javascript 事件循环和代码执行方面存在问题。

例如，我有一个非常基本的 jQuery 函数，例如：

$(document).ready(function()
{
$('#button').on('click', function() {
alert("This is a test");
});

当调用 jQuery 函数时，有人可以向我解释一下吗？
如果页面被加载会发生什么，.ready() 函数是否被放入消息队列并在函数的回调被触发时被传递到事件循环？（在这种情况下，回调将是完成加载的页面？）

【问题讨论】：

参见developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop: “在网络浏览器中，任何时候发生事件并附加一个事件侦听器都会添加消息。如果没有侦听器，则该事件丢失。因此，使用 click 事件处理程序单击元素将添加一条消息 - 与任何其他事件一样。” 就绪回调只是另一个事件处理程序。
什么消息队列？您所说的 回调函数 是一个函数。为什么你认为它是“加载页面”？？
@TJ：查看我发布的链接。
精彩的视频解释了堆栈、事件循环等事件youtube.com/watch?v=8aGhZQkoFbQ

标签： javascript jquery message-queue jquery-events event-loop

【解决方案1】：

.ready() 函数在从您的 HTML 构建 DOM 树时被调用，这就是它被称为 DOM 就绪事件的原因。在此之后，上面具有警报的 anonymous 函数将绑定到 ID 为 button 的元素的单击事件。这意味着每当单击此目标（具有 ID 按钮）时，都会调用此函数，因此您的警报将显示。我希望这会有所帮助！

【讨论】：

感谢您的回复，但我认为这有点通用。我想知道，在这种情况下事件循环是如何工作的。在这种情况下调用堆栈、消息队列和事件循环如何协同工作？
我的理解是，js中的每一个函数，包含一个回调，首先被放到一个调用栈上，然后，当他们的回调被触发时，函数就会被执行。同时，事件处理函数存储在消息队列中，等待其事件被触发。事件循环循环遍历消息队列，执行队列中等待的所有触发事件。