搜尋
首頁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
反應的好處:性能,可重用性等等反應的好處:性能,可重用性等等Apr 15, 2025 am 12:05 AM

React受歡迎的原因包括其性能優化、組件復用和豐富的生態系統。 1.性能優化通過虛擬DOM和diffing機制實現高效更新。 2.組件復用通過可複用組件減少重複代碼。 3.豐富的生態系統和單向數據流增強了開發體驗。

反應:創建動態和交互式用戶界面反應:創建動態和交互式用戶界面Apr 14, 2025 am 12:08 AM

React是構建動態和交互式用戶界面的首選工具。 1)組件化與JSX使UI拆分和復用變得簡單。 2)狀態管理通過useState鉤子實現,觸發UI更新。 3)事件處理機制響應用戶交互,提升用戶體驗。

React與後端框架:比較React與後端框架:比較Apr 13, 2025 am 12:06 AM

React是前端框架,用於構建用戶界面;後端框架用於構建服務器端應用程序。 React提供組件化和高效的UI更新,後端框架提供完整的後端服務解決方案。選擇技術棧時需考慮項目需求、團隊技能和可擴展性。

HTML和React:標記與組件之間的關係HTML和React:標記與組件之間的關係Apr 12, 2025 am 12:03 AM

HTML和React的關係是前端開發的核心,它們共同構建現代Web應用的用戶界面。 1)HTML定義內容結構和語義,React通過組件化構建動態界面。 2)React組件使用JSX語法嵌入HTML,實現智能渲染。 3)組件生命週期管理HTML渲染,根據狀態和屬性動態更新。 4)使用組件優化HTML結構,提高可維護性。 5)性能優化包括避免不必要渲染,使用key屬性,保持組件單一職責。

反應與前端:建立互動體驗反應與前端:建立互動體驗Apr 11, 2025 am 12:02 AM

React是構建交互式前端體驗的首選工具。 1)React通過組件化和虛擬DOM簡化UI開發。 2)組件分為函數組件和類組件,函數組件更簡潔,類組件提供更多生命週期方法。 3)React的工作原理依賴虛擬DOM和調和算法,提高性能。 4)狀態管理使用useState或this.state,生命週期方法如componentDidMount用於特定邏輯。 5)基本用法包括創建組件和管理狀態,高級用法涉及自定義鉤子和性能優化。 6)常見錯誤包括狀態更新不當和性能問題,調試技巧包括使用ReactDevTools和優

React和前端堆棧:工具和技術React和前端堆棧:工具和技術Apr 10, 2025 am 09:34 AM

React是一個用於構建用戶界面的JavaScript庫,其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染,優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件,高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當,可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting,保持代碼可讀性和可維護性是最佳實踐。

React在HTML中的作用:增強用戶體驗React在HTML中的作用:增強用戶體驗Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

REACT組件:在HTML中創建可重複使用的元素REACT組件:在HTML中創建可重複使用的元素Apr 08, 2025 pm 05:53 PM

React組件可以通過函數或類定義,封裝UI邏輯並通過props接受輸入數據。 1)定義組件:使用函數或類,返回React元素。 2)渲染組件:React調用render方法或執行函數組件。 3)復用組件:通過props傳遞數據,構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯,提升開發效率和代碼可維護性。

See all articles

熱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.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 Mac版

SublimeText3 Mac版

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

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具