记得刚开始写JS的时候，除了顺着写的代码（同步），对回调等一干代码的执行顺序非常模糊，没搞明白，后来看晚上有个口诀，叫同步优先，异步靠边，回调垫底，简单粗暴地理解为，即一个文件中，同步代码先执行，然后执行promise这样的异步代码，最后执行setTimeout这样的回调代码。
很长一段时间，我都不明白为什么是这样的机制，后来学习node的时候，知道了一个叫事件循环的东西，实际上，只要是js（node只是服务端的js)，就都有事件循环event loop
js的任务分为两种，同步任务与异步任务，同步任务直接进入主线程执行，异步任务则进入event table并注册函数(任务完成时的回调函数)，当异步任务完成时，event table 会将注册的函数移入 event queue, 当主线程中的任务都执行完，就会去event queue中读取相应的函数并执行，这个过程不断反复，就是event loop
那么，promise和setTimeout 按照划分，都应属于异步任务，为什么promise的回调函数要比setTimeout的回调函数先执行呢，那是因为除了同步与异步外，js对任务类型有更细致的划分，即宏任务(macro task)和微任务(micro task)
宏任务包括代码主体，setTimeout, setInterval, 微任务包括promise, nextTick, js事件循环的顺序是进入整体代码(宏任务)后，开始第一次循环，接着执行所有的微任务，然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务，如此往复。
setTimeout(function() {
console.log('setTimeout');
})
var p = new Promise(function(resolve) {
console.log('promise');
resolve()
})
p.then(()=>{ console.log('then') });
console.log('console');
上面这段代码，输出顺序是 1 promise 2 console 3 then 4 setTimeout
首先，整块代码作为宏任务进入主线程，碰到setTimeout，将回调函数放入宏任务event queue, promise中的同步代码直接输出，异步回调函数(then)放入微任务event queue, 碰到同步代码输出console，同步代码读完（第一个红任务结束），开始执行微任务，输出then, 然后执行下一个宏任务，输出setTimeout
所以，js的event loop 可以简单描述为，执行宏任务，执行 “属于该组宏任务” 的微任务，执行下一组宏任务，如此往复。
网友评论