JavaScript中的回調函數詳解
1.1 概念
1.1.1 什么是回調函數
**回調函數（Callback Function）**是你將一個函數的引用（指針）作為參數傳遞給另一個函數，在那個函數完成任務后調用回來執行你傳遞的函數。簡單的來說就是回調函數是作為參數傳遞給另一個函數，目的是讓接受它的函數在特定條件滿足、異步操作完成或事件發生的時候回調它
1.1.2 關鍵特征
- 傳而不調用的機制
- 你把函數A作為參數傳遞給B
- 函數B暫時不調用A,而是保存它的引用
- 當指定情況發生的時候，（事件觸發/異步操作完成后）,函數B才會調用它
// 經典回調結構
主函數(回調函數); // 傳遞時不執行function 主函數(cb) {// ...處理某些操作...cb(); // 滿足條件時才回調（調用）
}- 回：讓代碼執行流程回到調用者
- 調：由被調用方決定何時執行
- 函數：傳遞的是一段可執行的代碼邏輯
1.1.2 現實世界的比喻
想想你去飯館點餐：
- 你點了一份需要時間才能做好的飯菜（啟動異步任務）
- 服務員給你一個取餐號（獲得回調標識）
- 你去座位上喝茶（繼續執行主線程代碼）
- 廚師完成菜肴（后臺處理完成）
- 服務員喊你的號碼：123取餐（觸發回調）
- 你憑借著號碼牌取餐(執行回調函數處理結果)
整個過程的關鍵：你不需要等待，系統會在合適的時間通知你
1.2 代碼中的三種回調函數形式
2.1 同步回調
// 定義接收回調的函數
function processArray(arr, callback) {const result = [];for (const item of arr) {result.push(callback(item)); // 立即調用！}return result;
}// 使用
const doubled = processArray([1, 2, 3], x => x * 2);
console.log(doubled); // [2, 4, 6]
2.2 異步回調（延遲回呼）
//2.異步回調// 模擬異步任務function fetchData(url,callback){setTimeout(()=>{const data = `從${url}獲取的數據`;callback(data)},5000*4);}//使用 fetchData('api/users',data=>{console.log('收到的數據',data)})console.log("請求已發送，繼續執行其他任務...")
2.3 事件回調
<Button id = "myButton">點擊我</Button>
document.getElementById('myButton').addEventListener('click',()=>{console.log('按鈕被點擊了!')//當按鈕被點擊時執行
})
2.3.1 什么是事件回調
回調函數是指：將一個函數作為參數傳遞給另一個函數，并在特定事件發生或者條件滿足時才被調用的函數
在事件處理中：
- 事件發生：用戶執行了某些操作（比如點擊按鈕）
- 系統調用-瀏覽器自動出發之前“注冊”的回調函數
- 執行操作-回調函數中的代碼被執行
2.3.2 代碼中的回調關系
//結構解析
元素.addEventListener('事件類型',回調函數)//具體實例：
document.getElementById('myButton').addEventListener(
'click' //事件類型
() =>{
console.log('按鈕被點擊了！') //回調函數
}
)
為什么是“回調”的三個關鍵點
- 函數作為參數傳遞
- （）=》{console.log(…)}這個匿名函數作為參數傳遞給了addEventListener()方法
- 延遲執行
- 這個函數不會立即執行
- 它會一直等待，直到特定事件（這里是點擊事件）發生的時候才會被調用
- 反向調用
- 你不是主動調用它
- 而是由瀏覽器在事件觸發時“反回來調用”你注冊的函數
類比生活中的回調：
想象你寄快遞：
- 你把包裹（回調函數）交給快遞員（
addEventListener） - 你告訴快遞員：“當收件人簽收時（事件發生），請通知我（執行操作）”
- 之后你就去做其他事（代碼繼續執行）
- 當收件人真正簽收時（用戶點擊按鈕），快遞員打電話給你（執行回調函數）
2.3.3 回調的核心特點：
| 特點 | 說明 | 代碼體現 |
|---|---|---|
| 注冊機制 | 需要提前設置好響應事件的函數 | addEventListener |
| 異步性 | 事件何時發生不確定 | 代碼注冊后不立即執行 |
| 事件驅動 | 由外部事件觸發執行 | 等待用戶點擊操作 |
| 反轉控制權 | 由系統調用你的代碼 | 瀏覽器控制函數調用時機 |
在JavaScript中，事件處理基本都是采用這種回調機制，這被稱為事件驅動編程（Event-Driven Programming），是Web開發的核心模式之一。
所以叫它"事件回調"，是因為你把一個函數（"叫"它做什么）交給了事件系統，事件系統在特定事件發生后"回過來調用"你給它的函數。
)
