事件循环究竟是什么东东？附例题

其实事件循环Event loop的概念不难，难点在于你能判断事件的执行顺序。

还是先说说概念吧。我的理解的是JS里面事件分为宏任务和微任务，宏任务先于微任务执行。宏任务就是整段的script啊setTimeout啊setInterval这些，微任务是Promis.then方法这些。

同时任务还可以分为同步任务和异步任务。

执行任务的时候同步任务进入主线程处理，异步任务进入Event Table并注册回调函数，再把回调函数加到Event Queue里面，其中宏任务和微任务不是一个广场滴。

等到主线程里的同步任务执行完之后再读取Event  Queue里的任务执行。因为回调函数里面也可能会包含不同的任务，因此会循环执行上述操作。

这就是我理解的事件循环了~但是纸上谈兵是不够的，我在网上找几道题来增强理解吧。

console.log('script start');

setTimeout(function() {
  console.log('timeout1');
}, 10);

new Promise(resolve => {
    console.log('promise1');
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})

console.log('script end');
首先输出整段代码script start 遇到setTimeout添加到setTimeout队列里，遇到Promise执行其构造函数输出promise，遇到第二个setTimeout加到队列中，然后promise.then加到微任务队列里，遇到script end执行。主线程执行结束执行微任务，再执行setTimeout队列。

new Promise(resolve => {
    resolve(1);
    Promise.resolve().then(() => console.log(2));
    console.log(4)
}).then(t => console.log(t));
console.log(3);
构造promise对象执行构造函数4，第一个then和第二个then依次加入微任务队列中，执行整段script的代码3，主线程处理完毕执行微任务，输出2，再1.

• setTimeout(()=>{
• console.log('A');
• },0);
• var obj={
• func:function () {
• setTimeout(function () {
• console.log('B')
• },0);
• return new Promise(function (resolve) {
• console.log('C');
• resolve();
• })
• }
• };
• obj.func().then(function () {
• console.log('D')
• });
• console.log('E');

C E D A B

async function async1(){
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2(){
console.log('async2')
}
console.log('script start')
setTimeout(function(){
console.log('setTimeout')
},0)
async1();
new Promise(function(resolve){
console.log('promise1')
resolve();
}).then(function(){
console.log('promise2')
})
console.log('script end')