JS事件循环(event loop)

JavaScript事件循环（Event Loop）

JavaScript是一种单线程语言，意味着它只有一个主线程来处理代码执行。但是，在浏览器中，JavaScript通常需要处理异步任务，例如网络请求和用户输入等。

为了完成这些异步任务而不会阻止整个应用程序的响应，JavaScript使用事件循环(Event Loop)的概念。

什么是JavaScript事件循环？

JavaScript事件循环是指在单线程环境中，通过将所有任务分配到主线程来管理异步任务的执行顺序。它包含以下几个组件：

**调用栈(Call Stack)**：JavaScript 引擎使用调用栈来跟踪函数调用。每当函数被调用时，它就会被添加到调用栈的顶部。当函数返回时，它就会从调用栈中弹出。
**消息队列(Message Queue)**：消息队列是一个存储待执行函数的列表。每当异步任务完成时，会在消息队列中放置一个包含该任务的消息。
**事件循环(Event Loop)**：事件循环是一个负责监视调用栈和消息队列的机制。当调用栈为空时，事件循环会检查消息队列是否有待执行的任务。如果有，则将其取出并添加到调用栈中，以便执行。

执行过程

事件循环的执行过程如下：

所有同步任务都放入调用栈中，开始执行。
异步事件(如网络请求、定时器等)被加入消息队列中。
当调用栈为空时，取出消息队列中的第一个事件并将其放入调用栈中执行。
重复步骤3直到消息队列为空，并且没有其他代码需要执行。

下面我们来看一个具体的例子：

---------------------

------------- -- -
  --------------------------
-- ---

-----------------
  -------- -- -
    -----------------------
  ---

-------------------

这段代码中，我们首先打印出"start"和"end"。然后，我们使用setTimeout()函数将一个回调函数排在消息队列中，并使用Promise.resolve().then()在当前调用栈中创建一个新的微任务。

当当前调用栈为空时，事件循环会检查消息队列并发现setTimeout()的回调函数。因此，它将该函数添加到调用栈中并执行它。因为setTimeout()设置了延迟时间为0毫秒，所以该函数将立即执行。

接下来，Promise.resolve().then()也将添加到回调队列中。由于这是一个微任务，所以该函数将优先于消息队列中的任何其他事件执行。

最后，我们输出"promise"。由于此微任务已完成，事件循环将从队列中删除它。最终，输出"setTimeout"。

总结

理解JavaScript事件循环有助于我们编写更好的异步代码。在编写JavaScript代码时，请牢记事件循环模型，以便正确处理异步事件。同时，当需要使用setTimeout()和类似的函数时，请记得设置延迟时间而不是0毫秒，以避免阻塞事件循环。

希望这篇文章可以让你更好地理解JavaScript事件循环并且能够更好地应用它！

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/38048