首頁 > web前端 > 前端問答 > javascript什麼叫回呼函數

javascript什麼叫回呼函數

青灯夜游
發布: 2023-01-07 11:41:19
原創
4568 人瀏覽過

在javascript中,回呼函數就是一個被當作參數傳遞的函數。函數A作為參數(函數引用)傳遞到另一個函數B中,而這個函數B執行函數A,函數A就叫做回呼函數;如果沒有名稱(函數表達式),就叫做匿名回呼函數。

javascript什麼叫回呼函數

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

什麼是回呼函數(Callback)

在JavaScript中,函數是物件。因此,函數可以將函數作為參數,並且可以由其他函數傳回。執行此操作的函數稱為高階函數。作為參數傳遞的任何函數稱為回呼函數。

回呼函數具體的定義為:函數A作為參數(函數引用)傳遞到另一個函數B中,而這個函數B執行函數A。我們就說函數A叫回呼函數。如果沒有名稱(函數表達式),就叫做匿名回呼函數。

為什麼我們需要回呼?

出於一個非常重要的原因-JavaScript是一種事件驅動語言。這表示JavaScript不會繼續等待回應,而是在偵聽其他事件時繼續執行。讓我們來看一個基本的範例:

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();
登入後複製

如你所料,首先執行函數,然後執行第二函數,將以下內容記錄到控制台:

// 1
// 2
登入後複製

到目前為止一切都很好。

但是,如果函數包含無法立即執行的某些程式碼怎麼辦?例如,我們必須先發送請求然後等待回應的API請求?為了模擬此動作,將使用setTimeout,它是一個JavaScript函數,並將在設定的時間後呼叫該函數。我們將功能延遲500毫秒以模擬API請求。我們的新程式碼將如下所示:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();
登入後複製

現在了解setTimeout()的工作方式並不重要。重要的是,你看到我們把console.log(1)移到500毫秒延遲內。那麼,當我們呼叫函數時會發生什麼事呢?

first();
second();
// 2
// 1
登入後複製

即使我們先呼叫了first()函數,我們在second()函數之後才列印了它的結果。

這並不是說JavaScript沒有按照我們想要的順序執行我們的函數,而是JavaScript在繼續執行second()之前沒有等待first()的回應。

那為什麼給你看這個呢?因為你不能在一個函數後呼叫另一個另一個函數,而又希望它們以正確的順序執行。回調是一種確保某些程式碼在其他程式碼已經完成執行之前不會執行的方法。

建立一個回呼函數

好了,話不多說,讓我們建立一個回呼!

首先,打開您的Chrome開發者控制台(Windows:Ctrl Shift J)(Mac:Cmd Option J),然後在控制台中鍵入以下函數聲明:

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}
登入後複製

現在讓我們新增回調-作為doHomework()函數中的最後一個參數,我們可以傳入回調。然後在doHomework()的呼叫的第二個參數中定義回調函數。

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});
登入後複製

可以看到,如果你在控制台中輸入上述程式碼,則會收到兩個alert:「starting homework」alert,然後是「finished homework」alert。

但是,並非總是必須在我們的函數呼叫中定義回呼函數。它們可以在我們的程式碼的其他地方定義,如下所示:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);
登入後複製

此範例的結果與前面的範例完全相同,但設定略有不同。我們可以看到,在doHomework()函數呼叫期間,我們已將alertFinished函數定義為參數傳遞。

一個真實的範例

我們嘗試呼叫Twitter的API。向API發出請求時,必須等待回應,然後才能對該回應採取行動。這是真實回調的一個很好的例子。請求長這樣:

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})
登入後複製

T.get意味著我們正在向Twitter發送獲取請求

此請求中包含三個參數:「 search / tweets」(這是我們的請求的路由),params(這是我們的搜尋參數)和一個匿名函數(即我們的回呼)。

回呼在這裡很重要,因為我們需要等待伺服器的回應才能繼續執行程式碼。我們不知道我們的API請求是否會成功,因此在透過get請求將參數傳送到search/tweets後,我們等待。一旦Twitter響應後,將呼叫我們的回調函數。 Twitter會傳送錯誤(錯誤)物件或回應物件給我們。在回呼函數中,我們可以使用if()語句來確定我們的請求是否成功,然後對新資料採取相應措施。

【相關推薦:javascript學習教學

#

以上是javascript什麼叫回呼函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板