JS函數(shù)回調(diào)的本質(zhì)原理和應用場景

freeflydom

2025年4月10日 12:1 本文熱度 899

函數(shù)回調(diào)的定義：
通俗地講，把一個函數(shù)作為參數(shù)傳給另一個函數(shù)，這個函數(shù)則稱為回調(diào)函數(shù)。

圖解：
正常函數(shù)的模型圖

函數(shù)回調(diào)的模型圖

在看看嚴格點的定義：
函數(shù)回調(diào)就是一個通過函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個函數(shù)，當這個指針被用來調(diào)用其所指向的函數(shù)時，我們就說這是回調(diào)函數(shù)。回調(diào)函數(shù)不是由該函數(shù)的實現(xiàn)方直接調(diào)用，而是在特定的事件或條件發(fā)生時由另外的一方調(diào)用的，用于對該事件或條件進行響應。（新人可能會云里霧里，沒關系，結合著案例多看看。）

下文的函數(shù)回調(diào)、回調(diào)函數(shù)是一個意思。

把函數(shù)當參數(shù)

把函數(shù)當做參數(shù)的好處是？
假設實現(xiàn)一個計算器的需求，先編寫三個功能函數(shù)：求兩個整數(shù)的求最大值，求最小值，求和。

def computer(a, b, func):
    return func(a, b)
def max(a, b):
    return [a, b][a < b]
def min(a, b):
    return [a, b][a > b]
def sum(a, b):
    return str(int(a) + int(b))
if __name__ == "__main__":
    a = input("請輸入整數(shù)a:")
    b = input("請輸入整數(shù)b:")
    res = computer(a, b, max)
    print("Max of " + a + " and " + b + " is " + res)
    res = computer(a, b, min)
    print("Min of " + a + " and " + b + " is " + res)
    res = computer(a, b, sum)
    print("Sum of " + a + " and " + b + " is " + res)

請輸入整數(shù)a:2
請輸入整數(shù)b:3
Max of 2 and 3 is 3
Min of 2 and 3 is 2
Sum of 2 and 3 is 5

但是這個包將作為SDK給別人使用的話，是不知道別人想搭配什么功能函數(shù)的。那么可以將這三個函數(shù)都作為實參，讓用戶自由傳入，這樣就增加了編程的靈活性。

在調(diào)用max、min、sum時，這三個函數(shù)就是此處的回調(diào)函數(shù)。（回調(diào)函數(shù)和普通函數(shù)在定義的時候沒有什么區(qū)別，只有在調(diào)用時才看出來是不是回調(diào)函數(shù)，正常調(diào)用就是普通函數(shù)，作為一個函數(shù)的參數(shù)在需要的時候分情況調(diào)用，就是回調(diào)函數(shù)。）

可以異步的函數(shù)

當然回調(diào)函數(shù)還有一個更大的作用，就是可以結合上下文做異步，好處是異步不阻塞。

需要說明一下，回調(diào)的異步性并非來自函數(shù)本身，而是由調(diào)用它的API或操作（如setTimeout、I/O、事件監(jiān)聽）決定的。這種設計使得程序能在等待耗時操作時不阻塞主線程，從而提升效率和用戶體驗。

異步是系統(tǒng)底層封裝好的功能，大致是通過對事件循環(huán)和任務隊列機制等一起打包好了，只暴露一些公開函數(shù)和關鍵字給使用者。使用者只需要設計好一個代碼塊、一個函數(shù)傳入異步即可，所以函數(shù)回調(diào)和異步就這樣結合起來了。

異步不是本文的核心，這里只看看回調(diào)怎么結合異步實現(xiàn)一些超越同步編程的效果就好。

異步在前端編程中很常用，下面通過一個前端開發(fā)場景來展示異步回調(diào)如何解決同步代碼無法處理的問題：避免界面凍結，同時執(zhí)行耗時任務。

案例背景：模擬文件上傳

假設我們正在開發(fā)一個網(wǎng)頁，用戶點擊按鈕后需要：

上傳一個大文件到服務器（耗時操作）。
上傳完成后顯示“上傳成功”。
同時，用戶在上傳過程中可以繼續(xù)操作頁面（比如輸入文字、點擊其他按鈕）。

同步代碼的問題

如果用同步代碼實現(xiàn)文件上傳，會阻塞主線程，導致界面完全卡死，用戶無法進行任何操作：

// 同步上傳函數(shù)（假設存在同步的 uploadSync API）
function uploadSync(file) {
  // 模擬耗時操作（假設上傳需要3秒）
  const start = Date.now();
  while (Date.now() - start < 3000) {} // 同步阻塞3秒
  return "上傳成功";
}
// 點擊按鈕觸發(fā)上傳
document.getElementById("uploadBtn").addEventListener("click", () => {
  console.log("開始上傳...");
  const result = uploadSync("bigfile.zip"); // 同步調(diào)用，阻塞主線程3秒
  console.log(result);
  document.getElementById("status").textContent = result;
});
// 用戶嘗試在上傳過程中輸入文字，但界面會卡住3秒！

問題：

上傳期間，用戶無法在輸入框打字，所有UI操作被凍結。

控制臺輸出順序是：

開始上傳...
（3秒后）
上傳成功

異步回調(diào)解決方案

改用異步回調(diào)，釋放主線程，讓用戶在上傳過程中繼續(xù)操作頁面：

// 異步上傳函數(shù)（使用回調(diào)）
function uploadAsync(file, callback) {
  console.log("開始上傳...");
  // 使用 setTimeout 模擬異步上傳（如真實的 fetch 或 XMLHttpRequest）
  setTimeout(() => {
    const result = "上傳成功";
    callback(result); // 上傳完成后調(diào)用回調(diào)
  }, 3000);
}
// 點擊按鈕觸發(fā)上傳
document.getElementById("uploadBtn").addEventListener("click", () => {
  uploadAsync("bigfile.zip", (result) => {
    console.log(result);
    document.getElementById("status").textContent = result;
  });
});
// 用戶可以在上傳過程中正常輸入文字！

setTimeout()函數(shù)介紹：函數(shù)接受兩個參數(shù)，第一個是回調(diào)函數(shù)，第二個是推遲執(zhí)行的毫秒數(shù)。
setTimeout()會將事件插入了"任務隊列"，必須等到當前代碼（執(zhí)行棧）執(zhí)行完，主線程才會去執(zhí)行它指定的回調(diào)函數(shù)。 要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會在setTimeout()指定的時間執(zhí)行。

關鍵區(qū)別：

上傳期間，用戶可以在輸入框自由輸入，界面保持響應。

控制臺輸出順序是：

開始上傳...
（立即輸出，不阻塞）
（3秒后）
上傳成功

流程圖解

[用戶點擊上傳按鈕]
│
├─ 主線程執(zhí)行：調(diào)用 uploadAsync
│  │
│  ├─ 1. 輸出 "開始上傳..."
│  │
│  ├─ 2. 啟動異步操作（setTimeout 3秒）
│  │   │
│  │   └─ （3秒后）執(zhí)行回調(diào)：更新界面狀態(tài)
│  │
│  └─ 3. 函數(shù)立即返回，主線程空閑
│
├─ 用戶立即可以操作頁面（輸入文字、點擊其他按鈕）
│
└─ 3秒后，回調(diào)觸發(fā)，更新界面

為什么異步回調(diào)解決了同步無法處理的問題？

非阻塞主線程：
- 同步代碼會獨占主線程，導致瀏覽器無法處理用戶輸入、動畫渲染等任務。
- 異步回調(diào)將耗時任務交給瀏覽器底層API（如網(wǎng)絡線程、定時器線程），主線程繼續(xù)響應用戶操作。
保持用戶體驗：
- 用戶在上傳文件時，仍可以與其他UI元素交互（如填寫表單、切換標簽頁）。
真實場景應用：
- 所有Web應用的網(wǎng)絡請求（如AJAX、Fetch API）、文件讀寫（Node.js）、數(shù)據(jù)庫操作都必須使用異步，否則會導致服務完全卡死。

實際開發(fā)中會用到的異步回調(diào)

真實項目中，異步回調(diào)常用于：

// 1. 網(wǎng)絡請求
fetch("/api/data")
  .then(response => response.json())
  .then(data => console.log(data));
// 2. 定時任務
setTimeout(() => console.log("延時操作"), 1000);
// 3. 用戶事件監(jiān)聽
document.getElementById("button").addEventListener("click", () => {
  console.log("按鈕被點擊");
});
// 4. Node.js 文件讀取
const fs = require("fs");
fs.readFile("file.txt", "utf8", (err, data) => {
  if (err) throw err;
  console.log(data);
});