非同步機制


JavaScript 為什麼不採用多執行緒


單執行緒的狀況下- 習慣的思維

const userTable = { '1': { money: 10000 } } function withdraw (id, money) { userTable[id].money -= money } function deposit (id, money) { const currentMoney = userTable[id].money currentMoney += money userTable[id].money = currentMoney }
withdraw('1', 10000) // 0
deposit('1', 1000) // 1000

多執行緒的狀況下- 沒有互斥鎖的狀況

const money1 = userTable[id].money const money2 = userTable[id].money // * money1 -= 10000 userTable[id].money = money1 money2 += 1000 // 認為餘額還是 10000 userTable[id].money = money2 // 11000, 現賺 10000 (也可能變 0)

非同步仍是必要的- 畫面凍結的問題

https://codesandbox.io/s/ui-blocking-r354l


我都要! 單執行緒+非同步機制


Event Loop (事件循環機制)

Task and Microtask

function bar () { console.log('baz') } function foo () { bar() } setTimeout(() => { console.log('setTimeout') }, 1000) setInterval(() => { console.log('setInterval') }, 5000) foo()

Render時機與畫面凍結

為什麼要用 setTimeout, 只用 Promise.resolve 不可以嗎?

何時使用 microtask


小試身手

  • Task(Macrotask): setTimeout, requestAnimation
  • Microtask: Promise.then, process.nextTick
setTimeout(() => { console.log('setTimeout') }) new Promise(resolve => { console.log('promise executor') resolve() }) .then(() => { console.log('promise then') }) console.log('main')

總結


Q&A


歡迎來到真實世界

請寫出以下印出 0~9 的順序

async function async1() { new Promise(async resolve => { Promise.resolve() .then(() => { console.log(0) resolve() }) }) .then(() => { console.log(1) }) await async2() console.log(2) } async function async2() { async3() console.log(3) } function async3() { new Promise((resolve) => resolve()) .then(() => { console.log(4) }) Promise.resolve() .then(() => { console.log(5) }) } async1() setTimeout(function() { console.log(6) }, 0) new Promise(resolve => { console.log(7) resolve() }) .then(function() { console.log(8) }) .then(function() { console.log(9) })

其他挑戰


參考來源、圖片來源

Select a repo