JavaScript開(kāi)發(fā)者長(zhǎng)期以來(lái)一直使用回調(diào)函數(shù)來(lái)執(zhí)行多項(xiàng)任務(wù)。一個(gè)非常常見(jiàn)的例子是通過(guò)addEventListener()函數(shù)添加回調(diào)，以便在觸發(fā)點(diǎn)擊或按鍵等事件時(shí)執(zhí)行各種操作。回調(diào)函數(shù)簡(jiǎn)單易用，適用於簡(jiǎn)單場(chǎng)景。然而，當(dāng)網(wǎng)頁(yè)複雜度增加，需要並行或順序執(zhí)行許多異步操作時(shí)，回調(diào)函數(shù)就會(huì)變得難以管理。

ECMAScript 2015 (又名ECMAScript 6) 引入了一種處理此類情況的原生方法：Promise。如果您不了解Promise，可以閱讀文章《JavaScript Promise概述》。 jQuery 提供並仍然提供其自己的Promise版本，稱為Deferred對(duì)象。在Promise被引入ECMAScript之前數(shù)年，Deferred對(duì)象就已經(jīng)被引入jQuery。本文將討論Deferred對(duì)像是什麼，以及它們?cè)噲D解決什麼問(wèn)題。

關(guān)鍵要點(diǎn)

• Deferred對(duì)像簡(jiǎn)化異步編程： jQuery的Deferred對(duì)象提供了一種強(qiáng)大的方法來(lái)管理和協(xié)調(diào)異步操作，降低了傳統(tǒng)回調(diào)函數(shù)相關(guān)的複雜性。
• 與ECMAScript Promise的互操作性： 儘管實(shí)現(xiàn)方式有所不同，但3.x版本的jQuery Deferred對(duì)象改進(jìn)了與原生ECMAScript 2015 Promise的兼容性，增強(qiáng)了其在現(xiàn)代Web開(kāi)發(fā)中的實(shí)用性。
• 方法靈活： Deferred對(duì)象提供了多種方法，例如resolve()、reject()、done()、fail()和then()，允許開(kāi)發(fā)者精細(xì)控制異步流程的處理。
• 避免回調(diào)地獄： 通過(guò)使用Deferred和Promise對(duì)象，開(kāi)發(fā)者可以避免深度嵌套回調(diào)的常見(jiàn)陷阱，從而編寫(xiě)更易讀和易維護(hù)的代碼。
• 增強(qiáng)的錯(cuò)誤處理： jQuery 3引入了Deferred對(duì)象的catch()方法，與ECMAScript標(biāo)準(zhǔn)保持一致，並提供了一種簡(jiǎn)化的方法來(lái)處理Promise鏈中的錯(cuò)誤。

簡(jiǎn)史

Deferred對(duì)像在jQuery 1.5中引入，它是一個(gè)可鍊式調(diào)用的實(shí)用程序，用於將多個(gè)回調(diào)註冊(cè)到回調(diào)隊(duì)列中，調(diào)用回調(diào)隊(duì)列，並傳遞任何同步或異步函數(shù)的成功或失敗狀態(tài)。從那時(shí)起，它就一直是討論、一些批評(píng)和許多變化的主題。一些批評(píng)的例子包括《你錯(cuò)過(guò)了Promise的重點(diǎn)》和《JavaScript Promise以及為什麼jQuery的實(shí)現(xiàn)是錯(cuò)誤的》。

與Promise對(duì)像一起，Deferred代表了jQuery對(duì)Promise的實(shí)現(xiàn)。在jQuery 1.x和2.x版本中，Deferred對(duì)象遵循CommonJS Promises/A提案。該提案被用作Promises/A 提案的基礎(chǔ)，而原生Promise就是基於此提案構(gòu)建的。如引言中所述，jQuery不遵循Promises/A 提案的原因是，它在該提案提出之前很久就實(shí)現(xiàn)了Promise。

因?yàn)閖Query是先驅(qū)，並且由於向後兼容性問(wèn)題，在純JavaScript和jQuery 1.x和2.x中使用Promise的方式存在差異。此外，由於jQuery遵循不同的提案，該庫(kù)與其他實(shí)現(xiàn)了Promise的庫(kù)（如Q庫(kù)）不兼容。

在即將推出的jQuery 3中，與原生Promise（如ECMAScript 2015中實(shí)現(xiàn)的）的互操作性得到了改進(jìn)。出於向後兼容性的原因，主要方法（then()）的簽名仍然略有不同，但行為更符合標(biāo)準(zhǔn)。

jQuery中的回調(diào)函數(shù)

為了理解為什麼您可能需要使用Deferred對(duì)象，讓我們討論一個(gè)例子。使用jQuery時(shí)，經(jīng)常使用其Ajax方法執(zhí)行異步請(qǐng)求。為了舉例說(shuō)明，假設(shè)您正在開(kāi)發(fā)一個(gè)向GitHub API發(fā)送Ajax請(qǐng)求的網(wǎng)頁(yè)。您的目標(biāo)是檢索用戶的存儲(chǔ)庫(kù)列表，找到最近更新的存儲(chǔ)庫(kù)，找到名稱中包含字符串“README.md”的第一個(gè)文件，最後檢索該文件的內(nèi)容。根據(jù)此描述，每個(gè)Ajax請(qǐng)求只有在上一步完成後才能開(kāi)始。換句話說(shuō)，請(qǐng)求必須按順序運(yùn)行。

將此描述轉(zhuǎn)換為偽代碼（請(qǐng)注意，我沒(méi)有使用真實(shí)的GitHub API），我們得到：

var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});

正如您在這個(gè)例子中看到的，使用回調(diào)函數(shù)，我們必須嵌套調(diào)用來(lái)按我們想要的順序執(zhí)行Ajax請(qǐng)求。這使得代碼的可讀性降低。有很多嵌套回調(diào)，或者必須同步的獨(dú)立回調(diào)的情況，通常被稱為“回調(diào)地獄”。

為了稍微改進(jìn)一下，您可以從我創(chuàng)建的匿名內(nèi)聯(lián)函數(shù)中提取命名函數(shù)。但是，此更改並沒(méi)有多大幫助，我們?nèi)匀话l(fā)現(xiàn)自己處?kù)痘卣{(diào)地獄中。這時(shí)就需要Deferred和Promise對(duì)象了。

Deferred和Promise對(duì)象

在執(zhí)行異步操作（例如Ajax請(qǐng)求和動(dòng)畫(huà)）時(shí)，可以使用Deferred對(duì)象。在jQuery中，Promise對(duì)像是從Deferred對(duì)像或jQuery對(duì)象創(chuàng)建的。它擁有Deferred對(duì)象方法的一個(gè)子集：always()、done()、fail()、state()和then()。我將在下一節(jié)中介紹這些方法和其他方法。

如果您來(lái)自原生的JavaScript世界，您可能會(huì)對(duì)這兩個(gè)對(duì)象的存在感到困惑。為什麼當(dāng)JavaScript只有一個(gè)（Promise）時(shí)會(huì)有兩個(gè)對(duì)象（Deferred和Promise）？為了解釋差異及其用例，我將採(cǎi)用我在我的書(shū)《jQuery in Action，第三版》中使用的相同比喻。

如果您編寫(xiě)處理異步操作並應(yīng)返回值（也可以是錯(cuò)誤或根本沒(méi)有值）的函數(shù)，則通常使用Deferred對(duì)象。在這種情況下，您的函數(shù)是值的生產(chǎn)者，您希望阻止用戶更改Deferred的狀態(tài)。當(dāng)您是函數(shù)的使用者時(shí)，使用Promise對(duì)象。

為了闡明這個(gè)概念，假設(shè)您想實(shí)現(xiàn)一個(gè)基於Promise的timeout()函數(shù)（我將在本文的後續(xù)部分向您展示此例子的代碼）。您負(fù)責(zé)編寫(xiě)必須等待給定時(shí)間量的函數(shù)（在這種情況下不返回值）。這使您成為生產(chǎn)者。您的函數(shù)的使用者不關(guān)心解析或拒絕它。使用者只需要能夠添加函數(shù)以在Deferred的完成、失敗或進(jìn)度時(shí)執(zhí)行。此外，您希望確保使用者無(wú)法自行解析或拒絕Deferred。為了實(shí)現(xiàn)此目標(biāo)，您需要返回在timeout()函數(shù)中創(chuàng)建的Deferred的Promise對(duì)象，而不是Deferred本身。通過(guò)這樣做，您可以確保除了timeout()函數(shù)之外，沒(méi)有人可以調(diào)用resolve()或reject()方法。

您可以在此StackOverflow問(wèn)題中閱讀更多關(guān)於jQuery的Deferred和Promise對(duì)象之間區(qū)別的信息。

現(xiàn)在您知道了這些對(duì)像是什麼，讓我們來(lái)看看可用的方法。

Deferred方法

Deferred對(duì)象非常靈活，並提供滿足您所有需求的方法?？梢酝ㄟ^(guò)調(diào)用jQuery.Deferred()方法創(chuàng)建它，如下所示：

var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});

或者，使用$快捷方式：

var deferred = jQuery.Deferred();

創(chuàng)建後，Deferred對(duì)象會(huì)公開(kāi)多個(gè)方法。忽略那些已棄用或刪除的方法，它們是：

• always(callbacks[, callbacks, ..., callbacks])：添加要在Deferred對(duì)像被解析或拒絕時(shí)調(diào)用的處理程序。
• done(callbacks[, callbacks, ..., callbacks])：添加要在Deferred對(duì)像被解析時(shí)調(diào)用的處理程序。
• fail(callbacks[, callbacks, ..., callbacks])：添加要在Deferred對(duì)像被拒絕時(shí)調(diào)用的處理程序。
• notify([argument, ..., argument])：使用給定的參數(shù)調(diào)用Deferred對(duì)象的progressCallbacks。
• notifyWith(context[, argument, ..., argument])：使用給定的上下文和參數(shù)調(diào)用Deferred對(duì)象的progressCallbacks。
• progress(callbacks[, callbacks, ..., callbacks])：添加要在Deferred對(duì)像生成進(jìn)度通知時(shí)調(diào)用的處理程序。
• promise([target])：返回Deferred的Promise對(duì)象。
• reject([argument, ..., argument])：拒絕Deferred對(duì)象並使用給定的參數(shù)調(diào)用任何failCallbacks。
• rejectWith(context[, argument, ..., argument])：拒絕Deferred對(duì)象並使用給定的上下文和參數(shù)調(diào)用任何failCallbacks。
• resolve([argument, ..., argument])：解析Deferred對(duì)象並使用給定的參數(shù)調(diào)用任何doneCallbacks。
• resolveWith(context[, argument, ..., argument])：解析Deferred對(duì)象並使用給定的上下文和參數(shù)調(diào)用任何doneCallbacks。
• state()：確定Deferred對(duì)象的當(dāng)前狀態(tài)。
• then(resolvedCallback[, rejectedCallback[, progressCallback]])：添加要在Deferred對(duì)像被解析、拒絕或仍在進(jìn)行中時(shí)調(diào)用的處理程序。

這些方法的描述使我有機(jī)會(huì)強(qiáng)調(diào)jQuery文檔和ECMAScript規(guī)範(fàn)使用的術(shù)語(yǔ)之間的區(qū)別。在ECMAScript規(guī)範(fàn)中，當(dāng)Promise已完成或拒絕時(shí)，據(jù)說(shuō)Promise已解析。然而，在jQuery的文檔中，單詞“resolved”用於指代ECMAScript規(guī)範(fàn)稱為“fulfilled”的狀態(tài)。

由於提供的方法數(shù)量眾多，本文無(wú)法涵蓋所有方法。但是，在接下來(lái)的部分中，我將向您展示Deferred和Promise使用的幾個(gè)示例。在第一個(gè)示例中，我們將重寫(xiě)“jQuery中的回調(diào)函數(shù)”部分中檢查的代碼片段，但我們將使用這些對(duì)象而不是回調(diào)函數(shù)。在第二個(gè)示例中，我將闡明討論的生產(chǎn)者-消費(fèi)者類比。

使用Deferred順序執(zhí)行Ajax請(qǐng)求

在本節(jié)中，我將展示如何使用Deferred對(duì)象及其一些方法來(lái)提高“jQuery中的回調(diào)函數(shù)”部分中開(kāi)發(fā)的代碼的可讀性。在深入研究之前，我們必須了解我們需要哪些方法。

根據(jù)我們的需求和提供的方法列表，很明顯我們可以使用done()或then()方法來(lái)管理成功的情況。由於你們中的許多人可能已經(jīng)習(xí)慣了JavaScript的Promise對(duì)象，因此在這個(gè)例子中，我將使用then()方法。這兩個(gè)方法之間的一個(gè)重要區(qū)別是then()能夠?qū)⒔邮盏降膮?shù)值轉(zhuǎn)發(fā)到在其之後定義的其他then()、done()、fail()或progress()調(diào)用。

最終結(jié)果如下所示：

var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});

如您所見(jiàn)，代碼更易讀，因?yàn)槲覀兡軌驅(qū)⒄麄€(gè)過(guò)程分解成幾個(gè)處?kù)锻患?jí)別（關(guān)於縮進(jìn)）的小步驟。

創(chuàng)建基於Promise的setTimeout函數(shù)

如您所知，setTimeout()是一個(gè)在給定時(shí)間量後執(zhí)行回調(diào)函數(shù)的函數(shù)。這兩個(gè)元素（回調(diào)函數(shù)和時(shí)間）都應(yīng)作為參數(shù)提供。假設(shè)您想在一秒鐘後將消息記錄到控制臺(tái)。通過(guò)使用setTimeout()函數(shù)，您可以使用下面顯示的代碼實(shí)現(xiàn)此目標(biāo)：

var deferred = jQuery.Deferred();

如您所見(jiàn)，第一個(gè)參數(shù)是要執(zhí)行的函數(shù)，第二個(gè)參數(shù)是要等待的毫秒數(shù)。此函數(shù)多年來(lái)一直運(yùn)行良好，但是如果您需要在Deferred鏈中引入延遲怎麼辦？

在下面的代碼中，我將向您展示如何使用jQuery提供的Promise對(duì)象來(lái)開(kāi)發(fā)基於Promise的setTimeout()函數(shù)。為此，我將使用Deferred對(duì)象的promise()方法。

最終結(jié)果如下所示：

var deferred = $.Deferred();

在此列表中，我定義了一個(gè)名為timeout()的函數(shù)，它包裝了JavaScript的原生setTimeout()函數(shù)。在timeout()內(nèi)部，我創(chuàng)建了一個(gè)新的Deferred對(duì)象來(lái)管理一個(gè)異步任務(wù)，該任務(wù)包括在指定的毫秒數(shù)後解析Deferred對(duì)象。在這種情況下，timeout()函數(shù)是值的生產(chǎn)者，因此它創(chuàng)建Deferred對(duì)象並返回Promise對(duì)象。通過(guò)這樣做，我確保函數(shù)的調(diào)用者（使用者）無(wú)法隨意解析或拒絕Deferred對(duì)象。事實(shí)上，調(diào)用者只能使用done()和fail()等方法添加要執(zhí)行的函數(shù)。

jQuery 1.x/2.x和jQuery 3之間的區(qū)別

在使用Deferred的第一個(gè)示例中，我們開(kāi)發(fā)了一個(gè)查找名稱中包含字符串“README.md”的文件的代碼片段，但是我們沒(méi)有考慮找不到此類文件的情況。這種情況可以看作是失敗。當(dāng)這種情況發(fā)生時(shí)，我們可能希望中斷調(diào)用鏈並直接跳到其末尾。為此，自然會(huì)拋出異常並使用fail()方法捕獲它，就像使用JavaScript的catch()方法一樣。

在符合Promises/A和Promises/A 的庫(kù)中（例如，jQuery 3.x），拋出的異常將轉(zhuǎn)換為拒絕，並且將調(diào)用失敗回調(diào)（例如使用fail()添加的回調(diào)）。這將異常作為參數(shù)接收。

在jQuery 1.x和2.x中，未捕獲的異常將停止程序的執(zhí)行。這些版本允許拋出的異常冒泡，通常到達(dá)window.onerror。如果未定義任何函數(shù)來(lái)處理此異常，則顯示異常消息併中止程序的執(zhí)行。

為了更好地理解不同的行為，請(qǐng)查看此示例：

var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});

在jQuery 3.x中，此代碼將消息“First failure function”和“Second success function”寫(xiě)入控制臺(tái)。原因是，正如我之前提到的，規(guī)範(fàn)指出拋出的異常應(yīng)轉(zhuǎn)換為拒絕，並且必須使用異常調(diào)用失敗回調(diào)。此外，一旦異常被處理（在我們的示例中由傳遞給第二個(gè)then()的失敗回調(diào)處理），則應(yīng)執(zhí)行以下成功函數(shù)（在本例中是傳遞給第三個(gè)then()的成功回調(diào)）。

在jQuery 1.x和2.x中，除了第一個(gè)函數(shù)（拋出錯(cuò)誤的函數(shù)）之外，沒(méi)有其他函數(shù)被執(zhí)行，您只會(huì)看到控制臺(tái)顯示的消息“Uncaught Error: An error message”。

為了進(jìn)一步提高其與ECMAScript 2015的兼容性，jQuery 3還在Deferred和Promise對(duì)像中添加了一個(gè)新方法catch()。這是一種在Deferred對(duì)像被拒絕或其Promise對(duì)象處?kù)毒芙^狀態(tài)時(shí)執(zhí)行處理程序的方法。其簽名如下：

var deferred = jQuery.Deferred();

此方法只不過(guò)是then(null, rejectedCallback)的快捷方式。

結(jié)論

在本文中，我向您介紹了jQuery對(duì)Promise的實(shí)現(xiàn)。 Promise允許您避免使用討厭的技巧來(lái)同步並行異步函數(shù)以及嵌套回調(diào)的需要……

除了展示一些示例之外，我還介紹了jQuery 3如何改進(jìn)與原生Promise的互操作性。儘管突出了舊版jQuery和ECMAScript 2015之間的差異，但Deferred仍然是您工具箱中一個(gè)非常強(qiáng)大的工具。作為一名專業(yè)開(kāi)發(fā)人員，隨著項(xiàng)目難度的增加，您會(huì)發(fā)現(xiàn)自己經(jīng)常使用它。

jQuery Deferred對(duì)象的常見(jiàn)問(wèn)題解答 (FAQ)

(此處省略了FAQ部分，因?yàn)槠^(guò)長(zhǎng)，且與文章主旨關(guān)係不大。如果需要，可以單獨(dú)提出FAQ問(wèn)題。)

以上是jQuery的介紹延期對(duì)象的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！