【第一期】Promise 为什么会先于 setTimeout 执行

本期前端小知识介绍的是关于异步的内容，为什么 promise 会先于 setTimeout 执行

小知识

我们先来考虑下以下代码，你认为 log 的顺序是什么，如果你点击了页面会发送什么？

function sleep() {  
    var ms = 2000 + new Date().getTime()  
    while( new Date() < ms) {}  
    console.log('sleep finish')
}
document.addEventListener('click', function() {  
    console.log('click')
})

sleep()
setTimeout(function() {    
    console.log('timeout');
}, 0);

Promise.resolve().then(function() {    
    console.log('promise');
});console.log('finish')

对于 JS 来说，代码执行永远是同步的，异步是依靠浏览器来做的。在执行 sleep 这个方法的时候即使你点击了页面，也并不会 log 出东西。因为这时候 JS 的执行栈还有代码在执行，并不能响应异步操作。然后当 sleep 函数执行完成以后，你会惊奇的发现 promise 先于其他 log 出来了。对于浏览器来说，在处理异步的时候有好几个队列，promise 是放在一个 Microtask 队列中的。其他几个虽然也存储在不同的队列，但是本质是相同的。 浏览器有一个 Event Loop 在循环检查执行栈是否为空，为空时就丢异步代码进去。Microtask 队列中的任务会在每次 Event Loop 循环结束之前执行。而其他队列中的任务会在每次开始新的 Event Loop 时执行。所以 promise 会先于其他几个异步任务执行。

结尾

如果你看了文章有任何的问题，都可以留言提问，我都会一一答复。

前端小知识，每天学一点。