JavaScript開發(fā)者長期以來一直使用回調(diào)函數(shù)來執(zhí)行多項任務(wù)。一個非常常見的例子是通過addEventListener()函數(shù)添加回調(diào)，以便在觸發(fā)點擊或按鍵等事件時執(zhí)行各種操作?；卣{(diào)函數(shù)簡單易用，適用于簡單場景。然而，當(dāng)網(wǎng)頁復(fù)雜度增加，需要并行或順序執(zhí)行許多異步操作時，回調(diào)函數(shù)就會變得難以管理。

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

關(guān)鍵要點

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

簡史

Deferred對象在jQuery 1.5中引入，它是一個可鏈?zhǔn)秸{(diào)用的實用程序，用于將多個回調(diào)注冊到回調(diào)隊列中，調(diào)用回調(diào)隊列，并傳遞任何同步或異步函數(shù)的成功或失敗狀態(tài)。從那時起，它就一直是討論、一些批評和許多變化的主題。一些批評的例子包括《你錯過了Promise的重點》和《JavaScript Promise以及為什么jQuery的實現(xiàn)是錯誤的》。

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

因為jQuery是先驅(qū)，并且由于向后兼容性問題，在純JavaScript和jQuery 1.x和2.x中使用Promise的方式存在差異。此外，由于jQuery遵循不同的提案，該庫與其他實現(xiàn)了Promise的庫（如Q庫）不兼容。

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

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

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

將此描述轉(zhuǎn)換為偽代碼（請注意，我沒有使用真實的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);
    });
  });
});

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

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

Deferred和Promise對象

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

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

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

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

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

現(xiàn)在您知道了這些對象是什么，讓我們來看看可用的方法。

Deferred方法

Deferred對象非常靈活，并提供滿足您所有需求的方法?？梢酝ㄟ^調(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對象會公開多個方法。忽略那些已棄用或刪除的方法，它們是：

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

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

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

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

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

根據(jù)我們的需求和提供的方法列表，很明顯我們可以使用done()或then()方法來管理成功的情況。由于你們中的許多人可能已經(jīng)習(xí)慣了JavaScript的Promise對象，因此在這個例子中，我將使用then()方法。這兩個方法之間的一個重要區(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);
    });
  });
});

如您所見，代碼更易讀，因為我們能夠?qū)⒄麄€過程分解成幾個處于同一級別（關(guān)于縮進）的小步驟。

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

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

var deferred = jQuery.Deferred();

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

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

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

var deferred = $.Deferred();

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

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

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

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

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

為了更好地理解不同的行為，請查看此示例：

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”寫入控制臺。原因是，正如我之前提到的，規(guī)范指出拋出的異常應(yīng)轉(zhuǎn)換為拒絕，并且必須使用異常調(diào)用失敗回調(diào)。此外，一旦異常被處理（在我們的示例中由傳遞給第二個then()的失敗回調(diào)處理），則應(yīng)執(zhí)行以下成功函數(shù)（在本例中是傳遞給第三個then()的成功回調(diào)）。

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

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

var deferred = jQuery.Deferred();

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

結(jié)論

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

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

jQuery Deferred對象的常見問題解答 (FAQ)

(此處省略了FAQ部分，因為篇幅過長，且與文章主旨關(guān)系不大。如果需要，可以單獨提出FAQ問題。)

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