卡卡網(wǎng)

在這篇文章中，我將通過一些例子來幫助你理解什么是 JavaScript 回調(diào)函數(shù)以及如何使用它們。你還可以參考以下一文，學(xué)習(xí)和使用JavaScript回調(diào)函數(shù)。

• 5示例分析了解JavaScript回調(diào)函數(shù)(callback function)

什么是回調(diào)函數(shù)？

在 JavaScript 中，函數(shù)是對象。我們可以將對象作為參數(shù)傳遞給函數(shù)嗎？是的。

因此，我們也可以將函數(shù)作為參數(shù)傳遞給其他函數(shù)，并在外部函數(shù)內(nèi)部調(diào)用它們。聽起來很復(fù)雜？讓我在下面的示例中展示這一點：

function print(callback) {  
    callback();
}

print() 函數(shù)將另一個函數(shù)作為參數(shù)并在內(nèi)部調(diào)用它。這在 JavaScript 中是有效的，我們稱之為“回調(diào)”。所以作為參數(shù)傳遞給另一個函數(shù)的函數(shù)是回調(diào)函數(shù)。

為什么我們需要回調(diào)函數(shù)？

JavaScript 按自上而下的順序依次運行代碼。但是，在某些情況下，代碼在其他事情發(fā)生之后運行（或必須運行），而且不是按順序運行的。這稱為異步編程。

回調(diào)確保函數(shù)不會在任務(wù)完成之前運行，而是在任務(wù)完成后立即運行。它幫助我們開發(fā)異步 JavaScript 代碼，并讓我們遠離問題和錯誤。

在 JavaScript 中，創(chuàng)建回調(diào)函數(shù)的方法是將其作為參數(shù)傳遞給另一個函數(shù)，然后在某事發(fā)生或某項任務(wù)完成后立即回調(diào)。

如何創(chuàng)建回調(diào)

為了理解我上面解釋的內(nèi)容，讓我從一個簡單的例子開始。我們想將一條消息記錄到控制臺，但它應(yīng)該在 3 秒后出現(xiàn)。

const message = function() {  
    console.log("這條消息在3秒后顯示");
}
 
setTimeout(message, 3000);

JavaScript 中有一個名為setTimeout的內(nèi)置方法，它在給定時間段（以毫秒為單位）后調(diào)用函數(shù)或計算表達式。所以在這里，message函數(shù)在 3 秒后被調(diào)用。（1 秒 = 1000 毫秒）

換句話說，message函數(shù)是在某事發(fā)生后調(diào)用的（對于這個例子來說是在 3 秒之后），而不是之前。所以message函數(shù)是回調(diào)函數(shù)的一個例子。

匿名函數(shù)

我們可以直接在另一個函數(shù)內(nèi)部定義一個函數(shù)，而不是調(diào)用它。它看起來像這樣：

setTimeout(function() {  
    console.log("這條消息在3秒后顯示");
}, 3000);

我們可以看到，這里的回調(diào)函數(shù)沒有名字，在 JavaScript 中沒有名字的函數(shù)定義被稱為“匿名函數(shù)”。這與上面的示例執(zhí)行完全相同的任務(wù)。

作為箭頭函數(shù)的回調(diào)

如果你愿意，也可以編寫與 ES6 箭頭函數(shù)相同的回調(diào)函數(shù)，這是 JavaScript 中一種較新的函數(shù)類型：

setTimeout(() => { 
    console.log("這條消息在3秒后顯示");
}, 3000);

事件

JavaScript 是一種事件驅(qū)動的編程語言。我們還使用回調(diào)函數(shù)進行事件聲明。例如，假設(shè)我們希望用戶點擊一個按鈕：

<button id="callback-btn">Click here</button>

這次我們只會在用戶單擊按鈕時在控制臺上看到一條消息：

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("用戶已經(jīng)點擊了按鈕");
});

所以這里我們先用它的 id 選擇按鈕，然后我們用 addEventListener 方法添加一個事件監(jiān)聽器。它需要2個參數(shù)。第一個是它的類型，“click”，第二個參數(shù)是一個回調(diào)函數(shù)，它記錄單擊按鈕時的消息。

上例顯示，回調(diào)函數(shù)也用于 JavaScript 中的事件聲明。

總結(jié)

回調(diào)在 JavaScript 中經(jīng)常使用，希望這篇文章能幫助你了解它們的實際作用以及如何更輕松地使用它們。

相關(guān)文章

• 5示例分析了解JavaScript回調(diào)函數(shù)(callback function)
• [實例] JavaScript 常用函數(shù)調(diào)用方式：函數(shù)調(diào)用 vs 方法調(diào)用
• JavaScript函數(shù)調(diào)用的三種方式與this的使用【示例】
• 【示例】講解JavaScript IIFE 與函數(shù)調(diào)用

標(biāo)簽: 回調(diào)函數(shù)  callback