什么是事件循环 Eventloop

什么是事件循环 Eventloop

同步编程

我们先不着急明白事件循环是什么。先从它的起源入手。大家都知道JavaScript是同步的，也就是单线程，原因是因为如果不使用单线程，在操作DOM时可能会出现一些问题，比如我们有两个事件，一个是删除div，一个是添加div，他们的执行顺序不同，导致的结果也将截然不同。比如当前有div1和div2，如果先执行删除后添加，那么得到的就是div1和div2，但是如果是先执行添加后删除，那么得到的还是div1和div2。为了避免这种逻辑上的混乱，因此规定JavaScript是单线程的。

异步编程

但是如果JavaScript如果只是单线程的话，那也会有问题。比如我们执行多个任务，其中一个任务执行需要的时间很长，比如读取大文件或巨量的数据，此时就会造成阻塞，导致后面的任务无法执行，必须等待，造成程序假死（实际在执行，只是其中一个任务耗时特别长），用户体验极差。于是JavaScript就有了异步任务的概念。

所谓的异步任务，和同步任务不同，同步任务是一个任务和它的回调函数完成了，才执行下一个任务。但是异步任务却是，一个任务执行了，还没执行回调函数，就直接开始执行下一个任务。

举个不是很恰当的例子，就是一堆人在食堂排队买饭吃，第一个人买完饭（第一个任务执行了），但是还没开始吃（回调函数还没执行）；第二个人就开始买饭（第二个任务就执行了），还没开始吃，第三个人就又开始买饭了（第三个任务就执行了）。

宏任务（macro task）

整体代码的script（外层的同步代码）、setTimeout、setInterval、DOM监听、UI渲染相关事件、ajax等。

微任务（micro task）

promise、async await、process.nextTick等就是微任务。

事件循环 eventloop

说了这么多，那事件循环究竟是什么呢？事件循环，简单理解就是代码的执行流程。而理解事件循环就是理解所谓的同步代码、异步代码或者说宏任务、微任务的执行的先后顺序。

事件循环的执行顺序

执行顺序

先执行同步代码（主任务中的宏任务），遇到异步宏任务将异步宏任务放进宏任务队列，遇到异步微任务放进微任务队列。所有同步代码执行后再将异步微任务调入主线程中执行，执行完毕后，再将宏任务队列中的宏任务调入到队列中执行。

练习 1

同步、异步微任务、异步宏任务的执行顺序

Promise.resolve().then(()=>{
  console.log('1')  
  setTimeout(()=>{
    console.log('2')
  },0)
});
setTimeout(()=>{
  console.log('3')
  Promise.resolve().then(()=>{
    console.log('4')    
  })
},0);
console.log('5');

让我们分析下这道题目中的代码执行顺序，为了方便，我给每个任务都给个编号：

1、先从最外层开始看，先找同步代码：

// => 任务（1）
console.log('5'); 

2、再看异步代码，先看异步微任务：

// => 任务（2）
Promise.resolve().then(()=>{
  console.log('1')  
  setTimeout(()=>{
    console.log('2')
  },0)
});

3、最后看异步宏任务：

// => 任务（3）
setTimeout(()=>{
  console.log('3')
  Promise.resolve().then(()=>{
    console.log('4')    
  })
},0);

此时我们的任务列表可以分为 3 条，最外层同步代码：（1）；异步微任务：（2）；异步宏任务：（3）

4、此时按照顺序执行（1）（2），输出 5 1 又遇到宏任务

// => 任务（4）
setTimeout(()=>{
    console.log('2')
},0)

再次放进宏任务队列中，此时任务列表的已经没有了最外层同步代码和异步微任务，只剩下异步宏任务：（3）（4）

5、按照顺序执行（3），输出3时，又遇到异步微任务

// => 任务（5）
Promise.resolve().then(()=>{
    console.log('4')    
  })

放进微任务队列中，此时任务列表变成了，异步微任务：（5）；异步宏任务：（4）

6、此时按照顺序执行就直接输出了 4 2

完整流程

Promise.resolve().then(()=>{	// => (2)
  console.log('1')  // =>  (2-1)
  setTimeout(()=>{	// =>  (4)
    console.log('2')	// => (4-1)
  },0)
});
setTimeout(()=>{	// => (3)
  console.log('3')	// => (3-1)
  Promise.resolve().then(()=>{	// (3-2)
    console.log('4')	// => (3-2-1)  
  })
},0);
console.log('5');	// => (1)

---控制台最终结果---
5
1
3
4
2

练习 2

// 任务A
setTimeout(()=>{
    console.log(1)
},20)

// 任务B
setTimeout(()=>{
    console.log(2)
},0)

// 任务C
setTimeout(()=>{
    console.log(3)
},10)

// 任务D
setTimeout(()=>{
    console.log(4)
},10)

// 任务E
console.log(5)

按照队列顺序排列，最外层同步任务：E；异步宏任务：A、B、C、D。
虽然任务的执行顺序如上，但是setTimeout具有延时效果，因此真正的输出情况应该是：

---控制台打印---
5
2
3
4
1

练习 3

console.log(1)
new Promise((resolve,reject)=>{
    console.log(2)
    resolve()
}).then(res=>{
   console.log(3) 
})
console.log(4)

值得注意的是：上面一个promise中，console.log(2)属于宏任务，console.log(3) 才属于微任务。

第一轮是先执行同步代码（最外层的宏任务），先输出1，代码执行到promise时立即输出2，resolve将.then()中的代码放入到了微任务中，宏任务继续输出4，最后执行微任务输出3。
所以最终的输出是：

---控制台打印---
1
2
4
3

练习 4 setTimeout和promise的执行顺序

setTimeout(()=>{
    console.log(1)
},0)
new Promise((resolve,reject)=>{
    console.log(2)
    resolve()
}).then(()=>{
    console.log(3)
}).then(()=>{
    console.log(4)
})

console.log(5)

先执行同步代码（主栈中的宏任务），遇到setTimeout放入宏任务列表，执行到promise，马上输出2，resolve()将then()中的两部分代码丢入到微任务中，输出5，第一轮宏任务结束，开始执行第一轮留下的微任务，输出3和4，第一轮循环结束。开始第二轮宏任务setTimeout输出1

2
5
3
4
1

练习 5 setTimout和promise执行顺序变种题

setTimeout(()=>{
    console.log(1)
},0)
new Promise((resolve,reject)=>{
    console.log(2)
    for(let i = 0;i < 1000;i++){
        if(i === 10){
           console.log(10)
        }
        i === 999 && resolve()
    }
    console.log(3)
}).then(()=>{
    console.log(4)
})
console.log(5)

其实解题思路和一样，先执行同步代码（主栈中的宏任务），setTimeout放进宏任务列表中，遇到promise直接输出2，循环时输出10，resolve()将.then()中的代码放进微任务列表中，输出3，再输出5，第一轮宏任务结束，开始执行遗留下的微任务，直接输出4。第一轮事件循环结束，开始第二轮宏任务，setTimout输出1

---控制台打印---
2
10
3
5
4
1

在chrome的控制台console中输出结果的话，会发现每相邻的两个事件循环之间都会有一个undefined进行隔离

---控制台打印---
2
10
3
5
4
undefined
1

练习 6 setTimeout和promise相互嵌套

console.log(1)
setTimeout(()=>{
    console.log(2)
    Promise.resolve().then(()=>{
        console.log(3)
    })
},0)

new Promise((resolve,reject)=>{
    console.log(4)
    setTimeout(()=>{
        console.log(5)
        resolve(6)
    },0)
}).then(res=>{
    console.log(7)
    setTimeout(()=>{
        console.log(res)
    })
})

老规矩，先执行同步代码（主栈的宏任务），输出1，遇到setTimeout

setTimeout(()=>{
    console.log(2)
    Promise.resolve().then(()=>{
        console.log(3)
    })
},0)

放入宏任务列表中，遇到promise直接输出4，又遇到setTimeout

setTimeout(()=>{
  console.log(5)
    resolve(6)
},0)

放进宏任务列表中，第一轮宏任务结束，且没有微任务，结束第一轮事件循环。
开始第二轮宏任务，setTimeout输出2，resolve将console.log(3)放进微任务中，第二轮宏任务结束，执行第二轮微任务，输出3，结束第二轮事件循环。
开始第三轮宏任务，执行下一个setTimeout输出5，同时resolve(6)将

res=>{
 console.log(7)
 setTimeout(()=>{
     console.log(res)
 })
}

放进微任务列表中，第三轮宏任务结束，执行第三轮微任务，输出7，将

setTimeout(()=>{
     console.log(res)
 })

放进宏任务列表中，第三轮事件循环结束。开始第四轮宏任务，直接输出res，就是6

所以输出顺序为：

---控制台打印---
1
4
2
3
5
7
6

练习 7

async function async1(){
    console.log(1)
    await async2()
    console.log(2)
}

async function async2(){
    new Promise((resolve)=>{
        console.log(3)
        resolve()
    }).then(()=>{
        console.log(4)
    })
}

console.log(5)

setTimeout(()=>{
    console.log(6)
},0)

async1()

new Promise((resolve)=>{
    console.log(7)
    resolve()
}).then(()=>{
    console.log(8)
})

console.log(9)

第一轮宏任务（同步代码）开始，先输出5，遇到

setTimeout(()=>{
    console.log(6)
},0)

放进宏任务中，执行async1，输出1，执行async2，输出3，将

console.log(4)

放进宏任务中，执行async1，输出1，执行async2，输出3，将

console.log(4)

和

console.log(2)

放入微任务中，遇到promise，输出7，将

console.log(8)

放入微任务中，输出9，第一轮宏任务结束。开始遗留的微任务，输出4、2、8，第一轮事件循环结束。
开始第二轮事件循环，开始第二轮宏任务，输出6，事件循环结束。

---控制台打印---
5
1
3
7
9
4
2
8
6

练习 8

async function async1() {
    console.log('5');
    await async2();
    console.log('6');
}

async function async2() {
    console.log('7');
}

setTimeout(()=>{
    console.log(1)
})

new Promise(function(resolve){
    console.log(2);
    resolve();
}).then(function(){
    console.log(3)
});

console.log(4);

async1();

执行第一轮宏任务（同步代码）

setTimeout(()=>{
    console.log(1)
})

放入宏任务列表，遇到promise，输出2，console.log(3)放入微任务，输出4，执行async1，输出5，执行async2，输出7，console.log(‘6’)放入微任务中，第一轮宏任务结束，开始执行遗留的微任务，输出3和7。第一次事件循环结束，第二次宏任务开始，输出1。
所以，执行顺序为：

---控制台打印---
2
4
5
7
3
6
1

总结

其实事件循环本身并不难，总结一下：

（1）先执行主栈中的宏任务（同步代码），遇到setTimeout之类的宏任务就放进下个循环事件的宏任务列表中，遇见promise或者async await（其实就是对promise的封装）之类的微任务，就放进当前循环的微任务列表中。

（2）宏任务执行完毕后，执行当前循环中的微任务。完成当前事件循环中的所有微任务后，当前事件循环结束。

（3）开启下一轮循环后，重复上诉操作，注意每个setTimeout本身是一个宏任务，而非多个setTimeout为一个宏任务。

（4）当然，在我们的日常工作中基本上都使用了async await的操作将异步变成同步的写法，大家很容易忘记这部分的知识点。不过在我们的工作中，有些仍然会遇到直接使用promise或者多个setTimeout的情况，这时候代码的执行顺序常常使我们困惑，因此熟悉事件循环还是有一定必要的。