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

$.ajax(“xxx.com”, function(res) {

// …

});

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();

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

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

1. main 函数，也就是把整个 javascript 看成一个函数，入栈

2. foo 函数被执行，入栈

3. bar 函数被执行，入栈

4. baz 函数被执行，入栈

5. console.log 函数被执行，入栈

6. console.log 函数执行完毕，出栈

7. baz 函数执行完毕，出栈

8. bar 函数执行完毕，出栈

9. foo 函数执行完毕，出栈

10. 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)

})

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】