卡卡網(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ù)雜？讓我在下面的示例中展示這一點(diǎn)：

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

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

在 JavaScript 中，創(chuàng)建回調(diào)函數(shù)的方法是將其作為參數(shù)傳遞給另一個函數(shù)，然后在某事發(fā)生或某項(xiàng)任務(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)置方法，它在給定時(shí)間段（以毫秒為單位）后調(diào)用函數(shù)或計(jì)算表達(dá)式。所以在這里，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ù)進(jìn)行事件聲明。例如，假設(shè)我們希望用戶點(diǎn)擊一個按鈕：

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

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

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

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

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

總結(jié)

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

相關(guān)文章

• 5示例分析了解JavaScript回調(diào)函數(shù)(callback function)
• [實(shí)例] 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