JavaScript開発者は、複數(shù)のタスクを?qū)g行するためにコールバック関數(shù)を長い間使用してきました。非常に一般的な例は、クリックやキーなどのイベントがトリガーされたときにさまざまなアクションを?qū)g行するために、addEventListener()関數(shù)を介してコールバックを追加することです。コールバック関數(shù)はシンプルで使いやすく、シンプルなシナリオに適しています。ただし、Webページの複雑さが増加し、多くの非同期操作を並列または順次実行する必要がある場合、コールバック関數(shù)の管理が困難になります。

ECMAScript 2015（ECMAScript 6とも呼ばれます）は、そのような狀況を処理するためのネイティブ方法を紹介します：Promise。約束について知らない場合は、「JavaScript Promiseの概要」という記事を読むことができます。 JQueryは、延期オブジェクトと呼ばれる獨(dú)自のバージョンのPromiseを提供し、提供しています。約束がECMAScriptに導(dǎo)入される數(shù)年前に、延期されたオブジェクトはすでにjQueryに導(dǎo)入されました。この記事では、繰延オブジェクトが何であり、彼らが解決しようとしている問題について説明します。

キーポイント

• 延期されたオブジェクトは、非同期プログラミングを簡素化します。 jQueryの繰延オブジェクトは、非同期操作を管理および調(diào)整する強(qiáng)力な方法を提供し、従來のコールバック関數(shù)に関連する複雑さを軽減します。
ECMAScriptの約束との相互運(yùn)用性
• 実裝は異なりますが、jQuery延期オブジェクトの3.xバージョンは、Native Ecmascript 2015の約束との互換性を向上させ、開発における最新のWeb実用性を高めます。
• 柔軟な方法：延期されたオブジェクトは、、resolve()、reject()、done()、fail()、then()、
、
• などのさまざまな方法を提供します。開発者は、非同期プロセスの処理を細(xì)かく制御できます。
コールバックの避けてください：延期オブジェクトと約束のオブジェクトを使用することにより、開発者は深くネストされたコールバックの一般的な落とし穴を回避し、より読みやすく保守可能なコードを書きます。
• 強(qiáng)化されたエラー処理：catch()jQuery 3は、ecMascript標(biāo)準(zhǔn)と一致する繰延オブジェクトの
メソッドを?qū)毪贰romiseチェーンのエラーを処理するための簡略化された方法を提供します。

簡単な歴史繰延オブジェクトはjQuery 1.5に導(dǎo)入されました。これは、複數(shù)のコールバックをコールバックキューに登録し、コールバックキューを呼び出し、同期または非同期関數(shù)の成功または失敗ステータスを渡すためのチェーンに合うユーティリティです。それ以來、それは議論、いくつかの批判、多くの変化の対象となっています。批判のいくつかの例には、「あなたは約束のポイントを逃した」と「JavaScriptの約束、そしてjQueryが間違った実施である理由」が含まれます。

Promise Objectとともに、DeferredはJQueryの約束の実裝を表しています。 jQueryバージョン1.xおよび2.xでは、繰延オブジェクトはCommonJSの約束/提案に従います。この提案は、約束/Aの提案の基礎(chǔ)として使用され、この提案にはネイティブの約束が築かれました。紹介で述べたように、jQueryが約束/Aの提案に従わない理由は、提案が提案されるずっと前に約束を?qū)g施したためです。

jQueryは先駆者であり、純粋なJavaScriptとjQuery 1.xおよび2.xで約束を使用する方法に違いがあるためです。さらに、jQueryはさまざまな提案に従うため、ライブラリはQライブラリなどの約束を?qū)g裝する他のライブラリと互換性がありません。

ECMAScript 2015で実裝されたようなネイティブの約束との相互運(yùn)用性は、今後のJQuery 3で改善されました。メインメソッドの署名（

）は、後方互換性の理由でまだわずかに異なりますが、動(dòng)作はより標(biāo)準(zhǔn)的なものです。 then()

jquery のコールバック関數(shù)

繰延オブジェクトを使用する必要がある理由を理解するには、例を説明しましょう。 jQueryを使用する場合、Ajaxメソッドを使用して非同期リクエストを?qū)g行することがよくあります。たとえば、AjaxリクエストをGitHub APIに送信するWebページを開発しているとします。目標(biāo)は、ユーザーのリポジトリリストを取得し、最近更新されたリポジトリを見つけ、「readme.md」という名前の最初のファイルを見つけ、最後にファイルの內(nèi)容を取得することです。この説明によると、各AJAX要求は、前のステップが完了した後にのみ開始できます。言い換えれば、リクエストは

順序で実行する必要があります。 この説明を擬似コードに変換します（実際のgithub APIを使用していないことに注意してください）、

この例でわかるように、コールバック関數(shù)を使用して、必要な順序でAJAXリクエストを?qū)g行するための呼び出しをネストする必要があります。これにより、コードの読み取りが低下します。多くのネストされたコールバック、または同期する必要がある獨(dú)立したコールバックがあり、しばしば「コールバックHell」と呼ばれます。

少し改善するために、作成した匿名のインライン関數(shù)から名前付き関數(shù)を抽出できます。しかし、この変化はあまり役に立たなかったので、私たちはまだコールバック地獄にいることに気づきました。現(xiàn)時(shí)點(diǎn)では、オブジェクトが延期され、約束されています。

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);
    });
  });
});

延期され、オブジェクトを約束します

AJAXリクエストやアニメーションなどの非同期操作を?qū)g行するときに、延期されたオブジェクトを使用できます。 jQueryでは、Promiseオブジェクトは繰延オブジェクトまたはjQueryオブジェクトから作成されます。延期されたオブジェクトメソッドのサブセットがあります：

、、、

、

、およびalways()。次のセクションでは、これらおよびその他の方法について説明します。 done() fail()ネイティブのJavaScriptの世界から來た場合、これら2つのオブジェクトの存在に混亂する可能性があります。 JavaScriptに1つしかないのに、なぜ2つのオブジェクト（延期されて約束）があるのですか？違いとそのユースケースを説明するために、私の本「Jquery in Action、第3版」で使用したのと同じ比phorを取ります。 state() then()非同期操作を処理し、値を返す必要がある関數(shù)（エラーもまったく値もない場合もあります）を記述すると、通常、繰延オブジェクトを使用します。この場合、あなたの関數(shù)は価値のプロデューサーであり、ユーザーが延期された狀態(tài)を変更しないようにしたいと考えています。あなたが関數(shù)の消費(fèi)者であるときにPromiseオブジェクトを使用します。

この概念を明確にするには、約束ベースの

関數(shù)を?qū)g裝すると仮定します（この記事の次のセクションでこの例のコードを表示します）。お客様は、特定の時(shí)間を待つ必要がある関數(shù)を作成する責(zé)任があります（その場合、値は返されません）。これはあなたをプロデューサーにします。あなたの関數(shù)の消費(fèi)者は、それを解析または拒否することを気にしません。ユーザーは、延期が完了、失敗、または進(jìn)行狀況が完了したときに実行するために関數(shù)を追加できる必要があります。さらに、ユーザーが単獨(dú)で延期されたり拒否したりすることができないことを確認(rèn)する必要があります。これを達(dá)成するには、延期された自體ではなく、timeout()関數(shù)で作成された延期された約束オブジェクトを返す必要があります。これを行うことにより、timeout()関數(shù)を除いて、timeout()またはresolve()メソッドを呼び出すことができないことを確認(rèn)できます。 reject()

このstackoverflowの質(zhì)問で、jqueryの繰延されたオブジェクトとプロミスオブジェクトの違いについて詳しく読むことができます。

これらのオブジェクトが何であるかがわかったので、利用可能な方法を見てみましょう。

延期メソッド

延期されたオブジェクトは非常に柔軟であり、すべてのニーズを満たす方法を提供します。次のように

メソッドを呼び出すことで作成できます。 jQuery.Deferred()

または、$ショートカットを使用してください：

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);
    });
  });
});

作成後、延期されたオブジェクトは複數(shù)のメソッドを公開します。これらの非推奨または削除されたメソッドを無視してください、それらは次のとおりです

• always(callbacks[, callbacks, ..., callbacks])：延期されたオブジェクトが解析または拒否されたときに、呼び出されるハンドラーを追加します。
• done(callbacks[, callbacks, ..., callbacks])：延期されたオブジェクトが解析されたときに、呼び出されるハンドラーを追加します。
• fail(callbacks[, callbacks, ..., callbacks])：延期されたオブジェクトが拒否されたときに呼び出されるハンドラーを追加します。
• notify([argument, ..., argument])：指定されたパラメーターを使用して、延期されたオブジェクトのprogressCallbacksを呼び出します。
• notifyWith(context[, argument, ..., argument])：指定されたコンテキストとパラメーターを使用して、延期されたオブジェクトのを呼び出します。 progressCallbacks
• ：延期されたオブジェクトが進(jìn)行狀況通知を生成したときに呼び出されるハンドラーを追加します。 progress(callbacks[, callbacks, ..., callbacks])
• ：延期された約束オブジェクトを返します。 promise([target])
• ：延期されたオブジェクトを防御し、指定されたパラメーターを使用してreject([argument, ..., argument])を呼び出します。 failCallbacks
• ：延期されたオブジェクトを守り、指定されたコンテキストとパラメーターを使用してrejectWith(context[, argument, ..., argument])を呼び出します。 failCallbacks
• ：延期されたオブジェクトを解析し、指定されたパラメーターを使用してresolve([argument, ..., argument])を呼び出します。 doneCallbacks
• ：延期されたオブジェクトを解析し、指定されたコンテキストとパラメーターを使用してresolveWith(context[, argument, ..., argument])を呼び出します。 doneCallbacks
• ：延期されたオブジェクトの現(xiàn)在の狀態(tài)を決定します。 state()
• ：延期されたオブジェクトが解析されたり、拒否されたり、まだ進(jìn)行中の場合、ハンドラーを呼び出して呼び出します。 then(resolvedCallback[, rejectedCallback[, progressCallback]])

これらの方法の説明により、jQueryドキュメントとECMAScript仕様で使用される用語の違いを強(qiáng)調(diào)する機(jī)會(huì)が與えられます。 ECMAScriptの仕様では、約束が完了または拒否されたとき、約束が解決されたと言われています。ただし、jQueryのドキュメントでは、「解決」という単語は、ECMAScript仕様の「fulliled」と呼ばれる狀態(tài)を參照するために使用されます。

提供されている多數(shù)の方法により、この記事ではすべての方法をカバーすることはできません。ただし、次のセクションでは、延期されたと約束の例をいくつか紹介します。最初の例では、「jQueryのコールバック関數(shù)」セクションでチェックされたコードスニペットをオーバーライドしますが、コールバック関數(shù)の代わりにこれらのオブジェクトを使用します。 2番目の例では、議論されたプロデューサーと消費(fèi)者の類推を明確にします。

繰延注文を使用してajax要求を?qū)g行します このセクションでは、「jqueryのコールバック関數(shù)」セクションで開発されたコードの可読性を改善するために、繰延オブジェクトとその方法のいくつかを使用する方法を示します。深く掘り下げる前に、必要な方法を理解する必要があります。

私たちのニーズと提供された方法のリストに基づいて、成功した狀況を管理するためにdone()またはthen()メソッドを使用できることは明らかです。あなたの多くはJavaScriptのPromise Objectに慣れているかもしれないので、この例ではメソッドを使用します。これらの2つの方法の重要な違いは、then()が受信したパラメーター値を、その後定義された他のthen()、then()、done()、またはfail()呼び出しに転送できることです。 progress()

最終結(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);
    });
  });
});

約束ベースのSettimeout関數(shù)を作成します<

ご存知のように、

は、特定の時(shí)間の後にコールバック関數(shù)を?qū)g行する関數(shù)です。両方の要素（コールバック関數(shù)と時(shí)間）をパラメーターとして提供する必要があります。メッセージを1秒でコンソールにログに記録するとします。 関數(shù)を使用することにより、以下に示すコードでこれを達(dá)成できます。

ご覧のとおり、最初のパラメーターは実行される関數(shù)であり、2番目のパラメーターは待機(jī)するミリ秒の數(shù)です。この機(jī)能は長年にわたってうまく機(jī)能してきましたが、延期されたチェーンにレイテンシを?qū)毪工氡匾ⅳ雸龊悉悉嗓Δ扦筏绀Δ?

setTimeout()次のコードでは、jQueryが提供する約束オブジェクトを使用して約束ベースのsetTimeout()関數(shù)を開発する方法を示します。これを行うには、延期されたオブジェクトの

メソッドを使用します。

var deferred = jQuery.Deferred();

最終結(jié)果は次のとおりです

このリストでは、javascriptのネイティブ

関數(shù)をラップするsetTimeout()という関數(shù)を定義します。內(nèi)部promise()では、指定されたミリ秒の後に繰延オブジェクトを解析する非同期タスクを管理する新しい繰延延期オブジェクトを作成します。この場合、

関數(shù)は値の生産者であるため、延期されたオブジェクトを作成し、Promiseオブジェクトを返します。これを行うことにより、関數(shù)の発信者（消費(fèi)者）が自由に繰延オブジェクトを解析または拒否できないことを確認(rèn)します。実際、発信者は、

や

などのメソッドを使用して、実行する関數(shù)を追加できます。

var deferred = $.Deferred();

JQuery 1.x/2.xとjQuery 3

timeout()の差 setTimeout() deferredを使用した最初の例では、「readme.md」という名前のファイルを探すコードのスニペットを開発しましたが、そのようなファイルが見つからなかった場合は考慮しませんでした。この狀況は失敗と見なすことができます。これが起こったら、コールチェーンを壊して、その最後に直接ジャンプしたい場合があります。これを行うために、例外は自然にスローされ、JavaScriptの>メソッドと同様にtimeout()メソッドを使用してキャッチします。 timeout()Promises/AおよびPromises/A（たとえば、jQuery 3.x）に準(zhǔn)拠しているライブラリでは、スローされた例外が拒否に変換され、障害のあるコールバックが呼び出されます（たとえば、

で追加されます）。これにより、例外がパラメーターとして受信されます。 fail()

jQuery 1.xおよび2.xでは、猛攻撃の例外がプログラムの実行を停止します。これらのバージョンでは、スローされた例外が泡立ち、通常は

に達(dá)します。この例外を処理する機(jī)能が定義されていない場合、例外メッセージが表示され、プログラムの実行が中止されます。 window.onerror

さまざまな動(dò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では、このコードはメッセージ「最初の障害関數(shù)」と「2番目の成功関數(shù)」をコンソールに書き込みます。その理由は、前述したように、仕様は、スローされた例外を拒否に変換する必要があり、失敗したコールバックを例外を使用して呼び出す必要があることです。さらに、例外が処理されると（例では2番目の

に渡された失敗したコールバックによって処理されます）、次の成功した関數(shù)を?qū)g行する必要があります（この場合、成功したコールバックは、この場合、3番目のthen()に渡されます） ）。 then()

jQuery 1.xおよび2.xでは、最初の関數(shù)（エラーをスローする関數(shù)）を除いて、他の関數(shù)は実行されません。メッセージ「Uncaughtエラー：エラーメッセージ」のみが表示されます。

。これは、延期されたオブジェクトが拒否された場合、またはその約束オブジェクトが拒否された狀態(tài)にある場合にハンドラーを?qū)g行する方法です。その署名は次のとおりです

catch()この方法は、

の近道です。

var deferred = jQuery.Deferred();

then(null, rejectedCallback)結(jié)論

この記事では、jQueryの約束の実裝を紹介しました。約束により、厄介なトリックを使用して並行して非同期関數(shù)とネストされたコールバックを同期させる必要性を避けることができます... いくつかの例を示すことに加えて、jQuery 3がネイティブの約束で相互運(yùn)用性を改善する方法についても取り上げました。古いJQueryとEcmascript 2015の違いを強(qiáng)調(diào)しているにもかかわらず、Deferredはまだツールボックスの非常に強(qiáng)力なツールです。プロの開発者として、プロジェクトがより困難になるにつれて、頻繁に使用していることがわかります。

JQuery Deferred Objects（FAQ）

のFAQ

（記事が長すぎて記事の主なテーマとはほとんど関係がないため、FAQパーツは省略されています。必要に応じて、FAQの質(zhì)問を個(gè)別に尋ねることができます。）

以上がjquery＆＃x27;の繰延オブジェクトの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。