一文搞懂：JavaScript 事件循环机制 (event loop)

最新推荐文章于 2025-03-29 03:06:30 发布

2401_84619287

最新推荐文章于 2025-03-29 03:06:30 发布

阅读量984

点赞数 24

文章标签： javascript okhttp 开发语言

本文链接：https://blog.youkuaiyun.com/2401_84619287/article/details/139740670

版权

console.log(“finish”);

在上述代码中，$.ajax 的执行是异步的，不会阻塞 console.log 的运行

即不必等到 $.ajax 请求返回数据后，才执行 console.log

对于 $.ajax 称为异步函数。

为什么要有异步函数？

单线程

javascript 是一门单线程语言，只能同时做一件事情。

如果没有异步函数，堵塞在程序的某个地方，会导致后面的函数得不到执行，浏览器作为用户交互界面，显然要能及时反映用户的交互，因此要有异步函数。

为什么 javascript 不采用多线程呢？专门派发一个线程去处理用户交互他不好吗？

这个你可能得去问 javascript 的作者了。

执行栈

由于 javascript 是单线程语言，因此只有一个执行栈（调用栈）

function baz() {

console.log(“exec”)

}

function bar() {

baz();

}

function foo() {

bar();

}

foo();

我们可以用一个动画来演示执行栈的调用过程

根据动画流程，我们详细说一下调用栈的情况

main 函数，也就是把整个 javascript 看成一个函数，入栈
foo 函数被执行，入栈
bar 函数被执行，入栈
baz 函数被执行，入栈
console.log 函数被执行，入栈
console.log 函数执行完毕，出栈
baz 函数执行完毕，出栈
bar 函数执行完毕，出栈
foo 函数执行完毕，出栈
main 函数执行完毕，出栈

这种调用栈可以在程序报错的时候起到很好的 debug 的作用

function baz() {

throw new Error(“noop!”);

}

function bar() {

baz();

}

function foo() {

bar();

}

foo();

在查看错误中，我们明显的看到了之前提到的调用栈。

刚才的程序并无异步函数，

如果我们在程序中用到了异步函数

console.log(“begin”);

setTimeout(function cb(){

console.log(“finish”)

}, 1000);

这个时候我们再看执行栈

进栈出栈过程类似上面的分析，可是在这里，直到 main 函数执行完了，我们都没看到 cb 函数执行，可是确确实实 1000ms 左右后 cb 函数真的执行了，这里面是发生了什么情况？

在解释这个之前，我们先引入两个概念

宏观任务和微观任务

1. 宏观任务

在 ES5 之前，异步操作由宿主发起，JavaScript 引擎并不能发起异步操作，这类的异步任务称为宏观任务，比较典型的有

setTimeout(() => {

console.log(“exec”)

}, 2000);

2.微观任务

在 ES5 之后出现了 Promise ，用于解决回调地狱的问题，这个函数也是异步的，会等到 fulfill(resolve 或 reject) 后才会执行 then 方法

new Promise((resolve, reject) => {

resolve(“hello world”)

}).then(data => {

console.log(data)

})

这个异步任务，由 v8 引擎发起称为微观任务

这两类任务对 event loop 也有影响

接下来进入本文章重点！！

event loop

event loop 分为浏览器环境和 node 环境，实现是不一样的，本篇文章暂时只讨论浏览器环境下的 event loop

1. 浏览器环境下的 event loop

接下来，我们具体看一个很大的例子

console.log(“1”);

setTimeout(function cb1(){

console.log(“2”)

}, 0);

new Promise(function(resolve, reject) {

console.log(“3”)

resolve();

}).then(function cb2(){

console.log(“4”);

})

console.log(“5”)

这段代码用 event loop 的解释是这样的

用文字解释如下，上述动画以及文字解释忽略 main 函数

console.log("1") 入栈出栈，控制台显示 1
setTimeout 入栈，加入异步任务队列（此时处于等待执行完成的状态，对于setTimeout来说就是等待延迟时间算执行完成，对于Promise 来说就是被 fulfill 了才算执行完成。
new Promise 入栈出栈，控制台显示 3，并且把函数放入异步队列，等待完成了，就执行 then 方法，这里的话，演示动画忘记加上了。
console.log(5) 入栈出栈，控制台显示 5