关于js事件循环机制的一个小李子

175 阅读1分钟
setTimeout(function() { 
    console.log(1) 
}, 0); 
new Promise(function executor(resolve) { 
    console.log(2);
    for( var i=0 ; i<10000 ; i++ ) { 
        i == 9999 && resolve();
    } 
    console.log(3); 
}).then(function() { 
    console.log(4); 
});
 console.log(5);

执行结果: 2 3 5 4 1

js是单线程的语言,内部有完善的事件循环机制(event loop)来合理分配线程,下面我们来分析下产生这样结果的原因。

js中任务分为宏任务和微任务。代码执行第一行遇到延时任务,js会将它视为一个宏任务放在宏任务执行列表的尾部;执行到promise遇到一个异步请求,js将其视为一个微任务,放入微任务列表,微任务的执行原则是当前正在执行的任务结束后优先执行,等待所有微任务执行完毕执行下一个宏任务,因此当执行完当前代码栈内的代码,打印出2,3,5后,会优先执行promise的回调打印4,最后进入下一个宏任务打印1。

译文:JS事件循环机制(event loop)之宏任务、微任务