目錄
什麼是回呼函數(Callback)
為什麼我們需要回呼?
建立一個回呼函數
一個真實的範例
首頁 web前端 前端問答 javascript什麼叫回呼函數

javascript什麼叫回呼函數

Jun 29, 2021 pm 05:58 PM
javascript 回呼函數

在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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

java回呼函數怎麼寫 java回呼函數怎麼寫 Jan 09, 2024 pm 02:24 PM

java回調函數的寫法有:1、接口回調,定義一個接口,其中包含一個回調方法,在需要觸發回調的地方,使用該接口作為參數,並在合適的時機調用回調方法;2、匿名內部類回調,可以使用匿名內部類別來實現回調函數,避免創建額外的實作類別;3、Lambda表達式回調,在Java 8以上版本中,可以使用Lambda表達式來簡化回調函數的寫法等。

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

Java中回呼函數的基本語法與應用 Java中回呼函數的基本語法與應用 Jan 30, 2024 am 08:12 AM

Java回呼函數的基本寫法和使用方法引言:在Java程式設計中,回呼函數是一種常見的程式模式,透過回呼函數,可以將某個方法作為參數傳遞給另一個方法,從而實現方法的間接呼叫。回調函數的使用,在事件驅動、非同步程式設計和介面實作等場景中非常常見。本文將介紹Java回呼函數的基本寫法和使用方法,並提供具體的程式碼範例。一、回呼函數的定義回呼函數是一種特殊的函數,它可以作為參數

See all articles