iT邦幫忙

2024 iThome 鐵人賽

DAY 14
2
Modern Web

JavaScript學習筆記系列 第 14

[Day 14] callback function 回呼函式

  • 分享至 

  • xImage
  •  

MDN說明:

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

callback function(回呼函式)是一個函式,把函式當作另一個函式的參數傳入
可以發現callback function和一般函式沒有差別,唯一區別在於「執行的時機」。

一般函式

明確的呼叫函式,並且在呼叫的位置立即執行。

function sum(num1, num2) {
  console.log(num1 + num2);
}

sum(5, 7);// 這裡會立即執行,印出12

回呼函式

不直接呼叫函式,而是傳遞給另一個函式,由另一個函式在特定的時機下(例如某些操作完成後)再呼叫它。

function doSomething(callback){
    console.log("吃飯囉");
    setTimeout(function(){
        console.log("吃飽去散步");
        callback();
    },2000)
}

function afterDoSomething(){
    console.log("準備工作");
}

doSomething(afterDoSomething);

執行結果:

"吃飯囉"
(等待2秒)
"吃飽去散步"
"準備工作"

doSomething函式會先執行一些動作,在這些動作完成後,在2秒後呼叫傳入的callback函式afterDoSomething,來執行特定的呼叫邏輯。

回呼地獄 Callback Hell

當非同步操作有很多層時,程式碼結構會變得很難管理和閱讀,就會產生 callback hell問題。
https://ithelp.ithome.com.tw/upload/images/20240928/201690393jqsYQPAHj.png

圖片來源:網路

後來出現了 Promiseasync/await 來解決這個問題。

下一篇就會介紹到同步與非同步,以上分享~謝謝!

參考資料

MDN - Callback function
重新認識 JavaScript: Day 18 Callback Function 與 IIFE


上一篇
[Day 13] Hoisting 提升
下一篇
[Day 15] 同步與非同步 - 概念
系列文
JavaScript學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言