2025-02-18-callback_生活化例子

發表於 閱讀次數：
2025-02-18-callback_生活化例子

2025-02-18-callback_生活化例子

以下是 一個生活化又簡單的例子，幫助你理解什麼是 callback，還有什麼叫 callback hell（回呼地獄）。

🧁 情境例子：媽媽叫你幫忙做蛋糕

你幫媽媽做蛋糕要經過三個步驟：

  1. 買材料
  2. 打蛋混合
  3. 放進烤箱

這些步驟都不能同時做，必須一個做完再做下一個。

✅ 使用 callback 的寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function buyIngredients(callback) {
  setTimeout(() => {
    console.log('🛒 材料買好了！')
    callback()
  }, 1000)
}

function mixIngredients(callback) {
  setTimeout(() => {
    console.log('🥣 材料攪拌好了！')
    callback()
  }, 1000)
}

function bake(callback) {
  setTimeout(() => {
    console.log('🔥 蛋糕烤好了！')
    callback()
  }, 1000)
}

buyIngredients(() => {
  mixIngredients(() => {
    bake(() => {
      console.log('🎉 蛋糕完成，可以吃了！')
    })
  })
})

📌 說明

  • 每一個步驟都透過 callback 告訴下一個步驟「我好了，換你」。
  • 但 callback 一層又一層，就會像這樣：
1
2
3
4
5
6
7
買材料(() => {
  攪拌(() => {
    烘烤(() => {
      完成()
    })
  })
})

這看起來已經有點複雜了，如果還要再加「切蛋糕、包裝、送人」… 會變成這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
買材料(() => {
  攪拌(() => {
    烘烤(() => {
      切蛋糕(() => {
        包裝(() => {
          送人(() => {
            console.log('完成所有任務')
          })
        })
      })
    })
  })
})

😵 看起來是不是有點像「無限 callback」？這就是我們說的 callback hell。

🧠 重點總結

  • callback：就是「做完某件事，通知我去做下一件事」的函式。
  • callback hell：就是「太多 callback 巢狀在一起」，程式越寫越難讀。