事件循环 - 技术栈

我们在敲代码的时候，有时候会经常遇到执行结果和我们预料不符的情况，有一种原因就是因为忽略了JS的执行顺序，在这里我们来了解一下这个问题。

JS单线程的理解

我们都知道JS是单线程的，但是为什么会这样呢？JS语言的主要用途是与用户互动，比如操作DOM，如果是多线程的，一个线程正在操作某个DOM节点，而另外一个线程把这个DOM节点给删除了，这样就会产生比较麻烦的问题，所以说JS只能是单线程。

因为JS是单线程的，所以意味着所有的任务都需要排队，前一个任务执行完以后才会执行下一个任务，这就导致了如果前面某个任务占用的时间过长，就会严重影响到后面任务的进度，就会造成很大的麻烦。

同步任务，异步任务

为了避免上述所说的问题，JS开发者把所有的任务分为两种，一种是同步任务，另外一种是异步任务。

同步任务指的是在JS引擎（主线程）上排队执行并原地等待结果的任务，只有前一个任务执行完毕，才能执行后一个任务，所有的同步任务放在主线程执行会形成一个执行栈。

而异步任务是进入宿主环境（一般为浏览器或者NODE）的任务，不会原地等待结果，不会阻塞主线程任务的执行，异步任务会在将来执行。

举个例子：

js 复制代码

console.log(1)
setTimeout(()=>{
    console.log(2)
},2000)
console.log(3)

首先console.log(1)是同步任务，会放到主线程执行并等待结果，也就是后台打印1，然后setTimeout是异步任务，就会放入宿主环境里面等待，最后是console.log(3)也是同步任务，也会放到主线程执行并等待结果，后台打印3。

那宿主环境里的异步任务setTimeout怎么办呢，它会等待执行时机，在这里是一个定时器也就是2秒钟以后会把里面的代码推送给任务队列（如果说是一个点击事件，就会在点击的时候推送），就是说异步任务其实也是有一个队列来排队的（因为可能会有多个异步任务），同步任务的任务队列是执行栈，异步任务的队列就是任务队列。

记住下面一点，宿主环境把代码推送给任务队列的时候推送的是回调函数，在这里就是把()=>{console.log(2)}推送到任务队列中，等到执行栈执行完以后就会去任务队列里看看有没有回调函数，如果有就把回调函数推送到执行栈里去执行，所以最后打印2。

所以执行栈执行完所有的同步任务以后，就会去任务队列里看看有没有回调函数，如果有就推送到执行栈执行，执行完以后再去任务队列里看看，如果还有就继续推送到执行栈去执行，这种从执行栈里面到任务队列里反复查找的过程就是事件循环。

宏任务和微任务

异步任务也分为宏任务和微任务。

像定时器，延时器这些都属于宏任务，而Promise这种就属于微任务，微任务的执行顺序是要优先于宏任务的。

js 复制代码

    setTimeout(() => {
      console.log("宏任务");
    }, 0);
    new Promise((resolve) => {
      console.log("同步代码1");
      resolve("微任务");
    }).then((res) => {
      console.log(res);
    });
    console.log("同步代码2");

这个知识点在讲手写Promise的最后一部分搭建then回调的异步执行的时候也讲过。