三分鐘搞懂 Callback：異步編程的入門鑰匙
在編程世界里，“異步” 是繞不開的高頻詞 —— 比如加載圖片時不卡頓頁面、發(fā)送請求后不等待直接執(zhí)行后續(xù)代碼。而 Callback（回調函數(shù)），正是解鎖異步編程的第一把鑰匙，也是每個開發(fā)者入門時的基礎必修課。很多人覺得回調函數(shù)抽象難懂，其實它的邏輯和生活場景高度相似：就像你托朋友辦事時說 “辦完記得告訴我”，回調函數(shù)就是那個 “辦事結束后自動觸發(fā)的通知”，在主線程完成核心操作后，自動執(zhí)行預設邏輯。
無論你是剛接觸異步編程的新手，還是想快速鞏固基礎的開發(fā)者，這 3 分鐘都能讓你 get 關鍵知識點：看懂回調函數(shù)的基本語法、理解異步執(zhí)行邏輯、避開入門常見坑。跟著簡單示例一步步走，你會發(fā)現(xiàn)，原來 Callback 并沒有那么難，反而能成為你處理異步場景的實用工具～～
一、回調函數(shù)概述
在編程的世界里，回調函數(shù)就像是生活中的貼心小助手，看似神秘，實則用處多多。通俗來講，回調函數(shù)是一種特殊的函數(shù)，它被作為參數(shù)傳遞到另一個函數(shù)中，當這個函數(shù)完成特定的任務后，再回過頭來調用它。就好比你去餐廳吃飯，人太多需要排隊。這時服務員會給你一個號碼牌，告訴你等座位準備好了會按這個號碼叫你。這里的號碼牌就類似于回調函數(shù)，而餐廳座位準備好這個事件，就相當于調用回調函數(shù)的時機。
用更專業(yè)的語言描述，回調函數(shù)是一個通過函數(shù)指針調用的函數(shù)。當把一個函數(shù)的指針（即函數(shù)的地址）作為參數(shù)傳遞給另一個函數(shù)時，在滿足特定條件后，這個指針所指向的函數(shù)（也就是回調函數(shù)）就會被調用。這種機制在編程中極為常見，能夠有效提升代碼的靈活性與可重用性。
回調函數(shù)是一種特殊的函數(shù)，它作為參數(shù)傳遞給另一個函數(shù)，并在被調用函數(shù)執(zhí)行完畢后被調用。回調函數(shù)通常用于事件處理、異步編程和處理各種操作系統(tǒng)和框架的API。
基本概念：
- 回調：指被傳入到另一個函數(shù)的函數(shù)。
- 異步編程：指在代碼執(zhí)行時不會阻塞程序運行的方式。
- 事件驅動：指程序的執(zhí)行是由外部事件觸發(fā)而不是順序執(zhí)行的方式。
二、回調函數(shù)工作原理
圖片
2.1回調函數(shù)的實現(xiàn)步驟
以 JavaScript 為例，來深入探究回調函數(shù)的實現(xiàn)過程。假設我們正在開發(fā)一個簡單的電商購物車功能，需要在用戶添加商品到購物車后，執(zhí)行一些特定的操作，如更新購物車總數(shù)、顯示提示信息等。
// 定義回調函數(shù)
function updateCartTotal() {
console.log('購物車總數(shù)已更新');
}
function showSuccessMessage() {
console.log('商品已成功添加到購物車');
}
// 模擬添加商品到購物車的函數(shù)
function addToCart(product, callback1, callback2) {
console.log('已將' + product + '添加到購物車');
// 在特定事件（添加商品完成）發(fā)生時調用回調函數(shù)
if (typeof callback1 === 'function') {
callback1();
}
if (typeof callback2 === 'function') {
callback2();
}
}
// 調用函數(shù)并傳入回調函數(shù)
addToCart('蘋果', updateCartTotal, showSuccessMessage);在上述代碼中，首先定義了updateCartTotal和showSuccessMessage兩個回調函數(shù)，分別用于更新購物車總數(shù)和顯示成功提示信息。然后，addToCart函數(shù)模擬了添加商品到購物車的操作，它接受三個參數(shù)，一個是商品名稱，另外兩個是回調函數(shù)。當商品添加成功后，通過typeof檢查確保傳入的參數(shù)是函數(shù)類型，然后調用這兩個回調函數(shù)，從而實現(xiàn)了在特定事件發(fā)生后執(zhí)行相應的操作。
2.2調用約定與注意事項
在編程中，不同的編程語言和環(huán)境對于函數(shù)調用有不同的約定，這就是調用約定。常見的調用約定有__stdcall、__cdecl、__fastcall等 。以__stdcall為例，它是一種常見的調用約定，在 Windows API 中廣泛使用。在__stdcall約定下，函數(shù)的參數(shù)是從右向左依次壓入棧中，并且由被調用函數(shù)負責清理棧空間 。這就好比在一場接力比賽中，__stdcall規(guī)定了運動員傳遞接力棒的順序和交接棒后清理賽場的責任人。
在使用回調函數(shù)時，務必注意回調函數(shù)的參數(shù)類型、數(shù)量和返回值等方面需要與調用它的函數(shù)的期望相匹配。就像給一把鎖配鑰匙，鑰匙的形狀（參數(shù)類型、數(shù)量）必須與鎖孔（調用函數(shù)的期望）完全契合，才能正常開鎖（程序正常運行）。否則，可能會導致程序出現(xiàn)運行時錯誤，比如在 C++ 中，如果回調函數(shù)的參數(shù)類型與調用函數(shù)所期望的不一致，可能會引發(fā)未定義行為，程序可能會崩潰或者出現(xiàn)難以調試的錯誤。
三、回調函數(shù)實現(xiàn)原理
回調函數(shù)可以通過函數(shù)指針或函數(shù)對象來實現(xiàn)。
3.1函數(shù)指針
函數(shù)指針是一個變量，它存儲了一個函數(shù)的地址。當將函數(shù)指針作為參數(shù)傳遞給另一個函數(shù)時，另一個函數(shù)就可以使用這個指針來調用該函數(shù)。函數(shù)指針的定義形式如下：
返回類型 (*函數(shù)指針名稱)(參數(shù)列表)例如，假設有一個回調函數(shù)需要接收兩個整數(shù)參數(shù)并返回一個整數(shù)值，可以使用以下方式定義函數(shù)指針：
int (*callback)(int, int);然后，可以將一個實際的函數(shù)指針賦值給它，例如：
int add(int a, int b) {
return a + b;
}
callback = add;現(xiàn)在，可以將這個函數(shù)指針傳遞給其他函數(shù)，使得其他函數(shù)可以使用這個指針來調用該函數(shù)。
3.2函數(shù)對象/functor
除了函數(shù)指針，還可以使用函數(shù)對象來實現(xiàn)回調函數(shù)。函數(shù)對象是一個類的實例，其中重載了函數(shù)調用運算符 ()。當將一個函數(shù)對象作為參數(shù)傳遞給另一個函數(shù)時，另一個函數(shù)就可以使用這個對象來調用其重載的函數(shù)調用運算符。函數(shù)對象的定義形式如下：
class callback {
public:
返回類型 operator()(參數(shù)列表) {
// 函數(shù)體
}
};例如，假設有一個回調函數(shù)需要接收兩個整數(shù)參數(shù)并返回一個整數(shù)值，可以使用以下方式定義函數(shù)對象：
class Add {
public:
int operator()(int a, int b) {
return a + b;
}
};
Add add;然后，可以將這個函數(shù)對象傳遞給其他函數(shù)，使得其他函數(shù)可以使用這個對象來調用其重載的函數(shù)調用運算符。
3.3匿名函數(shù)/lambda表達式
回調函數(shù)的實現(xiàn)方法有多種，其中一種常見的方式是使用匿名函數(shù)/lambda表達式。
Lambda表達式是一個匿名函數(shù)，可以作為參數(shù)傳遞給其他函數(shù)或對象。在C++11之前，如果想要傳遞一個函數(shù)作為參數(shù)，需要使用函數(shù)指針或者函數(shù)對象。但是這些方法都比較繁瑣，需要顯式地定義函數(shù)或者類，并且代碼可讀性不高。使用Lambda表達式可以簡化這個過程，使得代碼更加簡潔和易讀。
下面是一個使用Lambda表達式實現(xiàn)回調函數(shù)的例子：
#include <iostream>
#include <vector>
#include <algorithm>
void print(int i) {
std::cout << i << " ";
}
void forEach(const std::vector<int>& v, const void(*callback)(int)) {
for(auto i : v) {
callback(i);
}
}
int main() {
std::vector<int> v = {1,2,3,4,5};
forEach(v, [](int i){std::cout << i << " ";});
}在上面的例子中，我們定義了一個forEach函數(shù)，接受一個vector和一個回調函數(shù)作為參數(shù)。回調函數(shù)的類型是void()(int)，即一個接受一個整數(shù)參數(shù)并且返回void的函數(shù)指針。在main函數(shù)中，我們使用了Lambda表達式來作為回調函數(shù)的實現(xiàn)，即[](int i){std::cout << i << " ";}。Lambda表達式的語法為{/ lambda body */}，其中[]表示Lambda表達式的捕獲列表，即可以在Lambda表達式中訪問的外部變量；{}表示Lambda函數(shù)體，即Lambda表達式所要執(zhí)行的代碼塊。
在使用forEach函數(shù)時，我們傳遞了一個Lambda表達式作為回調函數(shù)，用于輸出vector中的每個元素。當forEach函數(shù)調用回調函數(shù)時，實際上是調用Lambda表達式來處理vector中的每個元素。這種方式相比傳遞函數(shù)指針或者函數(shù)對象更加簡潔和易讀。
使用Lambda表達式可以方便地實現(xiàn)回調函數(shù)，使得代碼更加簡潔和易讀。但是需要注意Lambda表達式可能會影響代碼的性能，因此需要根據(jù)具體情況進行評估和選擇。
四、回調函數(shù)應用場景
回調函數(shù)是一種常見的編程技術，它可以在異步操作完成后調用一個預定義的函數(shù)來處理結果。回調函數(shù)通常用于處理事件、執(zhí)行異步操作或響應用戶輸入等場景。
回調函數(shù)的作用是將代碼邏輯分離出來，使得代碼更加模塊化和可維護。使用回調函數(shù)可以避免阻塞程序的運行，提高程序的性能和效率。另外，回調函數(shù)還可以實現(xiàn)代碼的復用，因為它們可以被多個地方調用。
回調函數(shù)的使用場景包括：
- 事件處理：回調函數(shù)可以用于處理各種事件，例如鼠標點擊、鍵盤輸入、網(wǎng)絡請求等。
- 異步操作：回調函數(shù)可以用于異步操作，例如讀取文件、發(fā)送郵件、下載文件等。
- 數(shù)據(jù)處理：回調函數(shù)可以用于處理數(shù)據(jù)，例如對數(shù)組進行排序、過濾、映射等。
- 插件開發(fā)：回調函數(shù)可以用于開發(fā)插件，例如 WordPress 插件、jQuery 插件等。
回調函數(shù)是一種非常靈活和強大的編程技術，可以讓我們更好地處理各種異步操作和事件。
4.1異步操作中的應用
在 JavaScript 中，定時器setTimeout和setInterval是常見的異步操作工具，而回調函數(shù)在其中發(fā)揮著關鍵作用。比如，當我們需要在頁面加載 3 秒后顯示一條歡迎消息時，可以這樣使用setTimeout：
setTimeout(function() {
console.log('歡迎來到我的網(wǎng)站！');
}, 3000);
在這個例子中，匿名函數(shù)function() { console.log('歡迎來到我的網(wǎng)站！'); }就是回調函數(shù)，它會在 3 秒的延遲時間結束后被調用。
在進行 AJAX 請求時，回調函數(shù)的應用也十分廣泛。以 jQuery 的$.ajax方法為例，假設我們要從服務器獲取用戶數(shù)據(jù)并展示在頁面上，代碼可以這樣寫：
$.ajax({
url: 'https://api.example.com/users',
type: 'GET',
dataType: 'json',
success: function(data) {
// 處理成功獲取到的數(shù)據(jù)，例如將數(shù)據(jù)展示在HTML頁面上
$('#userList').html('');
$.each(data, function(index, user) {
$('#userList').append('<li>' + user.name + '</li>');
});
},
error: function() {
console.log('請求失敗，請檢查網(wǎng)絡連接！');
}
});在這段代碼中，success和error函數(shù)都是回調函數(shù)。當 AJAX 請求成功時，success回調函數(shù)會被調用，將服務器返回的數(shù)據(jù)進行處理并展示在頁面上；若請求失敗，則會調用error回調函數(shù)，提示用戶請求失敗的信息。
4.2事件驅動編程中的應用
在網(wǎng)頁開發(fā)中，DOM 事件是實現(xiàn)交互功能的基礎，而回調函數(shù)則是處理這些事件的核心機制。以常見的按鈕點擊事件為例，當用戶點擊一個按鈕時，我們希望執(zhí)行一些特定的操作，比如彈出一個提示框。在 JavaScript 中，可以這樣實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>按鈕點擊事件示例</title>
</head>
<body>
<button id="myButton">點擊我</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('你點擊了按鈕！');
});
</script>
</body>
</html>在上述代碼中，addEventListener方法用于給按鈕元素添加點擊事件監(jiān)聽器。當按鈕被點擊時，作為第二個參數(shù)傳入的匿名函數(shù)function() { alert('你點擊了按鈕！'); }就會被調用，這個匿名函數(shù)就是回調函數(shù)，它實現(xiàn)了點擊按鈕后彈出提示框的功能。
再比如，當我們希望在鼠標移動到某個元素上時，改變該元素的背景顏色，可以利用mouseenter事件和回調函數(shù)來實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<style>
#box {
width: 200px;
height: 200px;
background - color: lightblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
document.getElementById('box').addEventListener('mouseenter', function() {
this.style.backgroundColor ='red';
});
</script>
</body>
</html>在這個例子中，當鼠標移動到id為box的元素上時，回調函數(shù)function() { this.style.backgroundColor ='red'; }會被觸發(fā)，將該元素的背景顏色從淺藍色變?yōu)榧t色。通過這種方式，回調函數(shù)使得我們能夠根據(jù)用戶的交互操作（如點擊、鼠標移動等），靈活地執(zhí)行相應的邏輯，從而實現(xiàn)豐富多樣的用戶交互體驗。
4.3庫函數(shù)與框架中的應用
在 C 語言的標準庫中，qsort函數(shù)是一個用于對數(shù)組進行快速排序的強大工具，而它的靈活性正是通過回調函數(shù)來實現(xiàn)的。qsort函數(shù)的原型如下：
void qsort(void *base, size_t nmemb, size_t size, int (*compar)(const void *, const void *));
其中，base是指向待排序數(shù)組首元素的指針，nmemb表示數(shù)組中元素的個數(shù)，size是每個元素的大小（以字節(jié)為單位），而compar則是一個指向比較函數(shù)的指針，這個比較函數(shù)就是回調函數(shù)。它的作用是定義元素之間的比較規(guī)則，以確定排序的順序。例如，要對一個整數(shù)數(shù)組進行升序排序，可以這樣實現(xiàn)：
#include <stdio.h>
#include <stdlib.h>
// 比較函數(shù)，用于按升序排列整數(shù)
int int_cmp(const void *a, const void *b) {
return (*(int *)a - *(int *)b);
}
int main() {
int arr[] = { 5, 2, 8, 1, 9 };
int n = sizeof(arr) / sizeof(arr[0]);
qsort(arr, n, sizeof(arr[0]), int_cmp);
for (int i = 0; i < n; i++) {
printf("%d ", arr[i]);
}
printf("\n");
return 0;
}在這個例子中，int_cmp函數(shù)作為回調函數(shù)傳遞給qsort函數(shù)。qsort函數(shù)在排序過程中，會根據(jù)int_cmp函數(shù)定義的比較規(guī)則，對數(shù)組元素進行比較和排序。如果需要對結構體數(shù)組進行排序，同樣可以通過定義合適的回調函數(shù)來實現(xiàn)。例如，假設有一個包含學生信息的結構體數(shù)組，要按照學生的年齡進行排序：
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
// 定義學生結構體
struct Student {
char name[20];
int age;
};
// 比較函數(shù)，用于按年齡升序排列學生
int student_cmp(const void *a, const void *b) {
return ((struct Student *)a)->age - ((struct Student *)b)->age;
}
int main() {
struct Student students[] = {
{"Alice", 20},
{"Bob", 18},
{"Charlie", 22}
};
int n = sizeof(students) / sizeof(students[0]);
qsort(students, n, sizeof(students[0]), student_cmp);
for (int i = 0; i < n; i++) {
printf("%s: %d\n", students[i].name, students[i].age);
}
return 0;
}在這個例子中，student_cmp函數(shù)作為回調函數(shù)，定義了按照學生年齡進行比較的規(guī)則。qsort函數(shù)根據(jù)這個規(guī)則對students數(shù)組進行排序，最終輸出按照年齡升序排列的學生信息。
在常見的 JavaScript 框架中，回調函數(shù)也隨處可見。以 Vue.js 為例，mounted鉤子函數(shù)就是一個典型的回調函數(shù)應用。當 Vue 組件被掛載到 DOM 上后，mounted函數(shù)會被自動調用，開發(fā)者可以在這個函數(shù)中執(zhí)行一些需要在組件掛載后立即執(zhí)行的操作，比如初始化數(shù)據(jù)、發(fā)起 AJAX 請求等：
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
mounted: function() {
console.log('組件已掛載到DOM上');
// 在這里可以進行AJAX請求等操作
this.$http.get('/data').then(response => {
this.message = response.data;
});
}
});在這段代碼中，mounted函數(shù)作為回調函數(shù)，在組件掛載完成這個特定事件發(fā)生時被調用，實現(xiàn)了在組件掛載后執(zhí)行特定邏輯的功能。
4.4回調函數(shù)：優(yōu)勢與挑戰(zhàn)并存
⑴優(yōu)勢盡顯
回調函數(shù)就像是編程世界里的多面手，為開發(fā)者帶來了諸多便利。在代碼靈活性方面，它允許在運行時動態(tài)選擇要執(zhí)行的函數(shù)，就像擁有一個智能的任務分配器，能夠根據(jù)不同的情況，靈活地安排合適的任務。比如在一個圖形繪制程序中，通過回調函數(shù)，可以根據(jù)用戶選擇的圖形類型（圓形、矩形、三角形等），動態(tài)地調用相應的繪制函數(shù)，極大地提升了程序的靈活性和交互性。
從代碼復用的角度來看，回調函數(shù)堪稱代碼復用的利器。通過將一些通用的邏輯封裝在回調函數(shù)中，可以在多個不同的場景中重復使用這些函數(shù)，避免了大量重復代碼的編寫。例如，在一個電商系統(tǒng)中，計算商品折扣的邏輯可能在多個地方（如購物車結算、訂單支付等）都需要用到，將這個計算邏輯封裝成回調函數(shù)后，就可以在這些不同的場景中輕松調用，提高了代碼的復用性，也降低了維護成本。
在降低模塊間耦合度方面，回調函數(shù)發(fā)揮著重要作用。它就像一座橋梁，在不破壞模塊獨立性的前提下，實現(xiàn)了模塊之間的通信與協(xié)作。以一個游戲開發(fā)項目為例，游戲中的角色模塊和場景模塊可以通過回調函數(shù)進行交互，角色模塊在完成某些特定動作（如進入新場景、觸發(fā)事件等）時，通過回調函數(shù)通知場景模塊進行相應的處理，而兩個模塊之間無需緊密耦合，各自保持相對的獨立性，這樣不僅提高了代碼的可維護性，也使得系統(tǒng)的擴展性更強。
⑵挑戰(zhàn)與應對
回調函數(shù)雖然強大，但在使用過程中也可能會遇到一些挑戰(zhàn)。其中，回調地獄（Callback Hell）是較為常見的問題。在 JavaScript 中，當進行多層嵌套的異步操作時，代碼會出現(xiàn)層層嵌套的回調函數(shù)，就像陷入了一個無盡的迷宮，導致代碼的可讀性和可維護性急劇下降。例如，在進行多個 AJAX 請求的鏈式操作時，代碼可能會變成這樣：
$.ajax({
url: 'https://api.example.com/data1',
type: 'GET',
success: function(data1) {
$.ajax({
url: 'https://api.example.com/data2?id=' + data1.id,
type: 'GET',
success: function(data2) {
$.ajax({
url: 'https://api.example.com/data3?key=' + data2.key,
type: 'GET',
success: function(data3) {
// 處理最終的數(shù)據(jù)
},
error: function() {
console.log('第三個請求失敗');
}
});
},
error: function() {
console.log('第二個請求失敗');
}
});
},
error: function() {
console.log('第一個請求失敗');
}
});為了應對回調地獄的問題，開發(fā)者們探索出了多種解決方案。其中，Promise 是 ES6 引入的一種處理異步操作的方式，它通過鏈式調用的方式，使得代碼更加清晰和易于維護。使用 Promise 改寫上述代碼如下：
function getData1() {
return new Promise((resolve, reject) => {
$.ajax({
url: 'https://api.example.com/data1',
type: 'GET',
success: resolve,
error: reject
});
});
}
function getData2(id) {
return new Promise((resolve, reject) => {
$.ajax({
url: 'https://api.example.com/data2?id=' + id,
type: 'GET',
success: resolve,
error: reject
});
});
}
function getData3(key) {
return new Promise((resolve, reject) => {
$.ajax({
url: 'https://api.example.com/data3?key=' + key,
type: 'GET',
success: resolve,
error: reject
});
});
}
getData1()
.then(data1 => getData2(data1.id))
.then(data2 => getData3(data2.key))
.then(data3 => {
// 處理最終的數(shù)據(jù)
})
.catch(error => console.log('請求失敗', error));在這個示例中，每個異步操作都被封裝成一個 Promise 對象，通過.then()方法進行鏈式調用，避免了回調函數(shù)的層層嵌套，使代碼的邏輯更加清晰。
ES8 引入的 async/await 語法糖則進一步簡化了異步操作的處理，讓異步代碼看起來更像是同步代碼。使用 async/await 改寫上述代碼如下：
async function getData() {
try {
const data1 = await $.ajax({
url: 'https://api.example.com/data1',
type: 'GET'
});
const data2 = await $.ajax({
url: 'https://api.example.com/data2?id=' + data1.id,
type: 'GET'
});
const data3 = await $.ajax({
url: 'https://api.example.com/data3?key=' + data2.key,
type: 'GET'
});
// 處理最終的數(shù)據(jù)
} catch (error) {
console.log('請求失敗', error);
}
}
getData();在這段代碼中，async關鍵字定義了一個異步函數(shù)，await關鍵字用于等待 Promise 對象的 resolve，并返回其結果。這樣的代碼結構更加簡潔明了，極大地提高了代碼的可讀性和可維護性。
五、回調函數(shù)：實例剖析
5.1示例一：簡單排序函數(shù)
在 Python 中，sorted函數(shù)是一個非常實用的排序工具，而它的強大之處在于可以通過傳入不同的回調函數(shù)，輕松實現(xiàn)多樣化的排序需求。比如，當我們有一個包含多個字典的列表，每個字典代表一個學生的信息，包含name（名字）和age（年齡）等字段。如果要根據(jù)學生的年齡進行升序排序，可以這樣使用 sorted函數(shù)：
students = [
{'name': 'Alice', 'age': 20},
{'name': 'Bob', 'age': 18},
{'name': 'Charlie', 'age': 22}
]
def get_age(student):
return student['age']
sorted_students = sorted(students, key=get_age)
print(sorted_students)在這段代碼中，get_age函數(shù)就是回調函數(shù)。sorted函數(shù)會遍歷students列表中的每個元素（即每個學生的字典），并將每個元素作為參數(shù)傳遞給get_age函數(shù)。get_age函數(shù)返回每個學生的年齡，sorted函數(shù)根據(jù)這些返回值來確定排序的順序，最終實現(xiàn)了按照學生年齡升序排序的效果。
如果想要按照學生名字的字母順序進行降序排序，只需修改回調函數(shù)和排序參數(shù)即可：
def get_name(student):
return student['name']
sorted_students = sorted(students, key=get_name, reverse=True)
print(sorted_students)這里的get_name函數(shù)作為新的回調函數(shù)，sorted函數(shù)根據(jù)它返回的學生名字進行排序，并且通過設置reverse=True參數(shù)，實現(xiàn)了降序排序。
5.2示例二：模擬事件監(jiān)聽
在 JavaScript 中，可以通過自定義一個簡單的事件監(jiān)聽系統(tǒng)來展示回調函數(shù)在事件處理中的應用。假設我們正在開發(fā)一個簡單的網(wǎng)頁游戲，當玩家點擊 “開始游戲” 按鈕時，需要執(zhí)行一系列的初始化操作，如加載游戲場景、初始化角色等。可以這樣實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>模擬事件監(jiān)聽示例</title>
</head>
<body>
<button id="startButton">開始游戲</button>
<script>
function loadGameScene() {
console.log('游戲場景已加載');
}
function initializeCharacter() {
console.log('角色已初始化');
}
function addEventListener(element, eventType, callback) {
if (element.addEventListener) {
element.addEventListener(eventType, callback);
} else if (element.attachEvent) {
element.attachEvent('on' + eventType, callback);
}
}
var startButton = document.getElementById('startButton');
addEventListener(startButton, 'click', function () {
loadGameScene();
initializeCharacter();
});
</script>
</body>
</html>在上述代碼中，addEventListener函數(shù)用于模擬事件監(jiān)聽機制，它接受三個參數(shù)：目標元素、事件類型和回調函數(shù)。當startButton按鈕被點擊時，作為回調函數(shù)的匿名函數(shù)function () { loadGameScene(); initializeCharacter(); }會被觸發(fā)執(zhí)行。在這個回調函數(shù)中，依次調用了loadGameScene和initializeCharacter函數(shù)，實現(xiàn)了點擊按鈕后加載游戲場景和初始化角色的功能。通過這種方式，回調函數(shù)使得我們能夠靈活地將事件與相應的處理邏輯關聯(lián)起來，增強了程序的交互性和功能性。
