js的setTimeout和Promise---同步非同步和微任務巨集任務

摘要： 久經前端開發沙場，會經歷各式各樣的需求，處理這些需求時候，會使用各種各樣的api和功能，這裡集中對setTimeout和Promise的非同步功能進行討論一下。 單獨使用的執行模式 這裡就使用Promise 作為例子，來探究一下單獨使用它，會有哪些注意點。 1.最初的...

久經前端開發沙場，會經歷各式各樣的需求，處理這些需求時候，會使用各種各樣的api和功能，這裡集中對setTimeout和Promise的非同步功能進行討論一下。

單獨使用的執行模式

這裡就使用Promise 作為例子，來探究一下單獨使用它，會有哪些注意點。

1.最初的試探

執行程式碼，Promise 的基本使用：

let fn = () => {
console.log(1)
let a = new Promise((resolve, reject) => {
console.log(2)
resolve(3)
})
console.log(4)
return a
}
// 執行
fn().then(data => console.log(data))

以上程式碼，輸出結果為：

1 // 同步
2 // 同步
4 // 同步
3 // 非同步

注意new Promise() 是同步方法，resolve 才是非同步方法。

此外，上面的方法，可以有下面這種寫法，效果等同，主要是把Promise 精簡了一下：

let fn = () => {
console.log(1)
console.log(2)
let a = Promise.resolve(3)
console.log(4)
return a
}

// 執行
fn().then(data => console.log(data))

因為現在討論的是Promise 的非同步功能，所以下面均使用第二種寫法的Promise

2.多個同級Promise

編輯器中，輸入以下程式碼，多個同級的單層的Promise ：

console.log('同步-0.1')
Promise.resolve().then(() => {
console.log('P-1.1')
})
Promise.resolve().then(() => {
console.log('P-1.2')
})
Promise.resolve().then(() => {
console.log('P-1.3')
})
console.log('同步-0.2')

則會依次輸出以下列印，毫無疑問的結果：

同步-0.1
同步-0.2
P-1.1
P-1.2
P-1.3

3.Promise 套Promise

複雜一下，新增行有註釋說明：

console.log('同步-0.1')
Promise.resolve().then(() => {
console.log('P-1.1')
Promise.resolve().then(() => { // 新加行
console.log('P-2.1') // 新加行
}) // 新加行
})
Promise.resolve().then(() => {
console.log('P-1.2')
Promise.resolve().then(() => { // 新加行
console.log('P-2.2') // 新加行
}) // 新加行
})
Promise.resolve().then(() => {
console.log('P-1.3')
Promise.resolve().then(() => { // 新加行
console.log('P-2.3') // 新加行
}) // 新加行
})
console.log('同步-0.2')

輸出結果如下：

同步-0.1
同步-0.2
P-1.1
P-1.2
P-1.3
P-2.1
P-2.2
P-2.3

可見，多層Promise 是一層一層執行的。

4.為了最終確認，進行最後一次驗證，在第一個Promise 裡面多加一層：

console.log('同步-0.1')
Promise.resolve().then(() => {
console.log('P-1.1')
Promise.resolve().then(() => {
console.log('P-2.1')
Promise.resolve().then(() => { // 新加行
console.log('P-3.1') // 新加行
}) // 新加行
Promise.resolve().then(() => { // 新加行
console.log('P-3.2') // 新加行
}) // 新加行
})
})
Promise.resolve().then(() => {
console.log('P-1.2')
Promise.resolve().then(() => {
console.log('P-2.2')
})
})
Promise.resolve().then(() => {
console.log('P-1.3')
Promise.resolve().then(() => {
console.log('P-2.3')
})
})
console.log('同步-0.2')

輸出結果如下：

同步-0.1
同步-0.2
P-1.1
P-1.2
P-1.3
P-2.1
P-2.2
P-2.3
P-3.1
P-3.2

確認完畢，的確是一層一層的執行。

而且這裡可以告訴大家，setTimeout 和setInterval 在單獨使用的時候，和Promise 是一樣的，同樣是分層執行，這裡不再貼程式碼了（友情提醒：setInterval 的話，需要第一次執行就把這個定時器清掉，否則就無限執行，卡死頁面秒秒鐘的事兒）,

混合使用的執行模式

接下來才是重點，下面將setTimeout 和Promise 進行混合操作。

console.log('同步-0.1')
Promise.resolve().then(() => {
console.log('P-1.1')
})
setTimeout(() => {
console.log('S-1.1')
});
Promise.resolve().then(() => {
console.log('P-1.2')
})
setTimeout(() => {
console.log('S-1.2')
});
console.log('同步-0.2')

執行結果如下。。。問題暴露出來了：

同步-0.1
同步-0.2
P-1.1
P-1.2
S-1.1
S-1.2

為什麼，在同級情況下，是Promise 執行完了setTimeout 才會執行？

是人性的泯滅，還是道德的淪喪？

是因為JavaScript任務型別！

JavaScript的微任務和巨集任務

敲黑板，標重點。

JavaScript的任務分為微任務（Microtasks）和巨集任務（task）；

• 巨集任務是主流，當js開始被執行的時候，就是開啟一個巨集任務，在巨集任務中執行一條一條的指令；
• 巨集任務可以同時有多個，但會按順序一個一個執行；
• 每一個巨集任務，後面都可以跟一個微任務佇列，如果微任務佇列中有指令或方法，那麼就會執行；如果沒有，則開始執行下一個巨集任務，直到所有的巨集任務執行完為止，微任務相當於巨集任務的小尾巴；
• 為什麼有了巨集任務，還會有微任務存在？因為巨集任務太佔用效能，當需要一些較早就準備好的方法，排在最後才執行的時候，又不想新增一個巨集任務，那麼就可以把這些方法，一個一個的放在微任務佇列裡面，在這個巨集任務中的程式碼執行完後，就會執行微任務佇列。

而Promise 是微任務，setTimeout 是巨集任務。

所以上面的程式碼中，程式碼執行時會是如下場景：

所以，現在如果執行下面的程式碼，結果也顯而易見吧：

console.log('同步-0.1')
Promise.resolve().then(() => {
console.log('P-1.1')
Promise.resolve().then(() => { // 新加行
console.log('P-2.1') // 新加行
Promise.resolve().then(() => { // 新加行
console.log('P-3.1') // 新加行
}) // 新加行
}) // 新加行
})
setTimeout(() => {
console.log('S-1.1')
});
Promise.resolve().then(() => {
console.log('P-1.2')
})
setTimeout(() => {
console.log('S-1.2')
});
console.log('同步-0.2')

執行結果如下：

同步-0.1
同步-0.2
P-1.1
P-1.2
P-2.1
P-3.1
S-1.1
S-1.2

無論Promise 套用多少層，都會在下一個setTimeout 之前執行。

Dom 操作到底是同步，還是非同步？

這裡出現一個說不清道不明的疑問，Dom 操作到底是同步操作還是非同步操作？

如果是同步操作，那vue 的nextTick 方法是做什麼用的？不就是在Dom更新完之後的回撥方法嗎？

如果是非同步操作，那在劇烈操作Dom後面的程式碼，為什麼會被阻塞？而且程式碼看上去，也的確是按順序執行的？

這裡直接說明：js裡面的Dom操作程式碼，是同步執行，但瀏覽器進行的Dom渲染，是非同步操作。

瀏覽器渲染Dom和執行js，同時只能二選一，渲染一次Dom的時機是，當前巨集任務和小尾巴微任務執行完，下一個巨集任務開始前