用 Callback 處理非同步問題的解題技巧

在 ES6 之前,如果我們想要控制非同步事件的順序時會用 Callback function 來實現,缺點就是當有很多 Function 卻都想要照順序執行時,寫法上會出現俗稱 Callback Hell,易讀性極低。

用 Callback 處理非同步問題的解題技巧
Photo by NordWood Themes / Unsplash

在 ES6 之前,如果我們想要控制非同步事件的順序時會用 Callback function 來實現,缺點就是當有很多 Function 卻都想要照順序執行時,寫法上會出現俗稱 Callback Hell,易讀性極低。

const funcA = (callback) => {
  setTimeout(() => {
    console.log('function A')
    if(typeof callback === 'function') callback()
  }, 2000)
}

const funcB = () => {
  setTimeout(function(){
    console.log('function B')
  }, 2000)
}

funcA(funcB)

/*
function A
function B
*/

參考資料
1. 重新認識 JavaScript: Day 26 同步與非同步
2. 先成為 callback 大師吧!