javascript回調(diào)函數(shù)有什么用

這篇文章主要為大家展示了“javascript回調(diào)函數(shù)有什么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“javascript回調(diào)函數(shù)有什么用”這篇文章吧。

在javascript中，回調(diào)函數(shù)就是一個(gè)被作為參數(shù)傳遞的函數(shù)。函數(shù)A作為參數(shù)（函數(shù)引用）傳遞到另一個(gè)函數(shù)B中，并且這個(gè)函數(shù)B執(zhí)行函數(shù)A，函數(shù)A就叫做回調(diào)函數(shù)；如果沒有名稱（函數(shù)表達(dá)式），就叫做匿名回調(diào)函數(shù)。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

什么是回調(diào)函數(shù)（Callback）

在JavaScript中，函數(shù)是對(duì)象。 因此，函數(shù)可以將函數(shù)作為參數(shù)，并且可以由其他函數(shù)返回。 執(zhí)行此操作的函數(shù)稱為高階函數(shù)。 作為參數(shù)傳遞的任何函數(shù)都稱為回調(diào)函數(shù)。

回調(diào)函數(shù)具體的定義為：函數(shù)A作為參數(shù)(函數(shù)引用)傳遞到另一個(gè)函數(shù)B中，并且這個(gè)函數(shù)B執(zhí)行函數(shù)A。我們就說函數(shù)A叫做回調(diào)函數(shù)。如果沒有名稱(函數(shù)表達(dá)式)，就叫做匿名回調(diào)函數(shù)。

為什么我們需要回調(diào)？

出于一個(gè)非常重要的原因-JavaScript是一種事件驅(qū)動(dòng)語(yǔ)言。這意味著JavaScript不會(huì)繼續(xù)等待響應(yīng)，而是會(huì)在偵聽其他事件時(shí)繼續(xù)執(zhí)行。讓我們看一個(gè)基本的例子：

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

如你所料，首先執(zhí)行函數(shù)，然后執(zhí)行第二函數(shù)，將以下內(nèi)容記錄到控制臺(tái)：

// 1
// 2

到目前為止一切都很好。

但是，如果函數(shù)包含無法立即執(zhí)行的某些代碼怎么辦？ 例如，我們必須先發(fā)送請(qǐng)求然后等待響應(yīng)的API請(qǐng)求？ 為了模擬此動(dòng)作，將使用setTimeout，它是一個(gè)JavaScript函數(shù)，將在設(shè)置的時(shí)間后調(diào)用該函數(shù)。 我們將功能延遲500毫秒以模擬API請(qǐng)求。 我們的新代碼將如下所示：

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

現(xiàn)在了解setTimeout（）的工作方式并不重要。重要的是，你看到我們把console.log（1）移到500毫秒延遲內(nèi)。那么，當(dāng)我們調(diào)用函數(shù)時(shí)會(huì)發(fā)生什么呢？

first();
second();
// 2
// 1

即使我們先調(diào)用了first（）函數(shù)，我們?cè)趕econd（）函數(shù)之后才打印了它的結(jié)果。

這并不是說JavaScript沒有按照我們想要的順序執(zhí)行我們的函數(shù)，而是JavaScript在繼續(xù)執(zhí)行second（）之前沒有等待first（）的響應(yīng)。

那為什么給你看這個(gè)呢？因?yàn)槟悴荒茉谝粋€(gè)函數(shù)后調(diào)用另一個(gè)另一個(gè)函數(shù)，而又希望它們以正確的順序執(zhí)行?；卣{(diào)是一種確保某些代碼在其他代碼已經(jīng)完成執(zhí)行之前不會(huì)執(zhí)行的方法。

創(chuàng)建一個(gè)回調(diào)函數(shù)

好了，話不多說，讓我們創(chuàng)建一個(gè)回調(diào)！

首先，打開您的Chrome開發(fā)者控制臺(tái)（Windows：Ctrl + Shift + J）（Mac：Cmd + Option + J），然后在控制臺(tái)中鍵入以下函數(shù)聲明：

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

現(xiàn)在讓我們添加回調(diào)-作為doHomework（）函數(shù)中的最后一個(gè)參數(shù)，我們可以傳入回調(diào)。然后在對(duì)doHomework（）的調(diào)用的第二個(gè)參數(shù)中定義回調(diào)函數(shù)。

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

doHomework('math', function() {
  alert('Finished my homework');
});

可以看到，如果你在控制臺(tái)中輸入上述代碼，則會(huì)收到兩個(gè)alert：“starting homework”alert，然后是“finished homework”alert。

但是，并非總是必須在我們的函數(shù)調(diào)用中定義回調(diào)函數(shù)。它們可以在我們的代碼的其他地方定義，如下所示：

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

此示例的結(jié)果與前面的示例完全相同，但是設(shè)置略有不同。我們可以看到，在doHomework（）函數(shù)調(diào)用期間，我們已將alertFinished函數(shù)定義作為參數(shù)傳遞。

一個(gè)真實(shí)的例子

我們嘗試調(diào)用Twitter的API。 向API發(fā)出請(qǐng)求時(shí)，必須等待響應(yīng)，然后才能對(duì)該響應(yīng)采取行動(dòng)。 這是真實(shí)回調(diào)的一個(gè)很好的例子。 請(qǐng)求長(zhǎng)這樣：

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發(fā)送獲取請(qǐng)求

此請(qǐng)求中包含三個(gè)參數(shù)：“ search / tweets”（這是我們的請(qǐng)求的路由），params（這是我們的搜索參數(shù)）和一個(gè)匿名函數(shù)（即我們的回調(diào)）。

回調(diào)在這里很重要，因?yàn)槲覀冃枰却?a title="服務(wù)器" target="_blank" href="http://kemok4.com/">服務(wù)器的響應(yīng)才能繼續(xù)執(zhí)行代碼。 我們不知道我們的API請(qǐng)求是否會(huì)成功，因此在通過get請(qǐng)求將參數(shù)發(fā)送到search/tweets后，我們等待。 一旦Twitter響應(yīng)后，將調(diào)用我們的回調(diào)函數(shù)。 Twitter會(huì)向我們發(fā)送錯(cuò)誤（錯(cuò)誤）對(duì)象或響應(yīng)對(duì)象。 在回調(diào)函數(shù)中，我們可以使用if（）語(yǔ)句來確定我們的請(qǐng)求是否成功，然后對(duì)新數(shù)據(jù)采取相應(yīng)措施。

以上是“javascript回調(diào)函數(shù)有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！