js基礎進階--promise和setTimeout執行順序的問題

時間 2019-11-08

標籤基礎進階 promise settimeout 執行順序問題欄目 JavaScript 简体版

原文原文鏈接

歡迎訪問個人我的博客：http://www.xiaolongwu.cngit

前言

promise爲es6引進的語言標準，爲異步編程的一種解決方案；es6

閱讀此文的前提是瞭解瀏覽器event loop的機制，還有promise的基本用法和特性，好比他自執行特性、狀態不可逆特性等github

拋出問題

且看下面代碼和問題編程

setTimeout(function(){console.log(1)},0);
new Promise(function(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
// 而不是 2 3 5 1 4

既然promise.then和setTimeout都是異步的，那麼在事件循環隊列中 promise.then的事件應該排在setTimeout後面，那爲何promise.then卻在setTimeout前面被打印了出來？promise

重要概念

event loop 的概念瀏覽器

Javascript是單線程的，全部的同步任務都會在主線程中執行。
當主線程中的任務，都執行完以後，系統會「依次」讀取任務隊列裏的事件。與之相對應的異步任務進入主線程，開始執行。
異步任務之間，會存在差別，因此它們執行的優先級也會有區別。大體分爲微任務（micro task，如：Promise、MutaionObserver等）和宏任務（macro task，如：setTimeout、setInterval、I/O等）。
Promise 執行器中的代碼會被同步調用，可是回調是基於微任務的。
宏任務的優先級高於微任務
每個宏任務執行完畢都必須將當前的微任務隊列清空
第一個 script 標籤的代碼是第一個宏任務
主線程會不斷重複上面的步驟，直到執行完全部任務。