Home >> Blog >> 什麼是 JavaScript 中的 回呼函式 callback function？
什麼是Callback函式 什麼是 JavaScript 中的 回呼函式 callback function？
函數是對象
我們首先需要知道的是，在 Javascript 中，函數是一等對象。因此，我們可以像處理其他對像一樣使用它們，例如將它們分配給變量並將它們作為參數傳遞給其他函數。這很重要，因為正是後一種技術允許我們在應用程序中擴展功能。
回調函數
回調函數是作為參數傳遞給另一個函數的函數，以便稍後“回調”。接受其他函數作為參數的函數稱為高階函數，它包含回調函數何時執行的邏輯。正是這兩者的結合使我們能夠擴展我們的功能。
為了說明回調，讓我們從一個簡單的例子開始：
function createQuote(quote, callback){
var myQuote = "Like I always say, " + quote;
callback(myQuote); // 2
}
function logQuote(quote){
console.log(quote);
}
createQuote("eat your vegetables!", logQuote); // 1
// Result in console:
// Like I always say, eat your vegetables!
在上面的例子中，createQuote是高階函數，它接受兩個參數，第二個是回調。該logQuote函數被用作我們的回調函數。當我們執行createQuote函數(1)時，請注意，當我們將它作為參數傳入時，我們沒有附加括號。logQuote這是因為我們不想立即執行回調函數，我們只想將函數定義傳遞給高階函數，以便稍後執行。
此外，我們需要確保如果我們傳入的回調函數需要參數，我們在執行回調(2)時提供這些參數。在上面的例子中，這就是callback(myQuote);語句，因為我們知道它logQuote需要一個引號被傳入。
此外，我們可以將匿名函數作為回調傳遞。下面的調用createQuote將與上面的示例具有相同的結果：
createQuote("eat your vegetables!", function(quote){
console.log(quote);
});
順便說一句，您不必使用“回調”一詞作為參數的名稱，Javascript 只需要知道它是正確的參數名稱。基於上面的例子，下面的函數將以完全相同的方式運行。
function createQuote(quote, functionToCall) {
var myQuote = "Like I always say, " + quote;
functionToCall(myQuote);
}
為什麼要使用回調函數？
大多數時候，我們正在創建以同步方式運行的程序和應用程序。換句話說，我們的一些操作只有在前面的操作完成後才開始。通常，當我們從其他來源（例如外部 API）請求數據時，我們並不總是知道何時會返回我們的數據。在這些情況下，我們希望等待響應，但我們並不總是希望整個應用程序在獲取數據時停止。這些情況是回調函數派上用場的地方。
我們來看一個模擬對服務器的請求的例子：
function serverRequest(query, callback){
setTimeout(function(){
var response = query + "full!";
callback(response);
},5000);
}
function getResults(results){
console.log("Response from the server: " + results);
}
serverRequest("The glass is half ", getResults);
// Result in console after 5 second delay:
// Response from the server: The glass is half full!
在上面的示例中，我們向服務器發出模擬請求。5 秒後響應被修改，然後我們的回調函數getResults被執行。要查看此操作，您可以將上述代碼複製/粘貼到瀏覽器的開發人員工具中並執行它。
另外，如果您已經熟悉setTimeout，那麼您一直在使用回調函數。傳入上述示例setTimeout函數調用的匿名函數參數也是一個回調！所以示例的原始回調實際上是由另一個回調執行的。如果可以的話，請注意不要嵌套太多回調，因為這會導致所謂的“回調地獄”！顧名思義，處理起來並不愉快。