5

私はdeferredコンセプト全体を理解しようとしており、それを使用してfadeIn/fadeOutアニメーションを Ajax 呼び出しと同期させようとしています。

基本的に、ページのコンテンツを次のように切り替えています。

  1. ajax でコンテンツを取得する
  2. 応答時フェードアウト
  3. コンテンツを置き換える
  4. フェードイン

ただし、deferred私が正しいことを理解していれば、次のようなことができるかもしれません。

  1. フェードアウトし、同時に ajax で Fetch コンテンツを初期化します
  2. フェードアウトとコンテンツのフェッチの両方が完了した場合: コンテンツの変更
  3. フェードイン

元のソリューションのコード:

$.get(url, function(page) {
    $('#content').fadeTo(100, 0, 'linear', function() {
        $(this).html(page.text).fadeTo(400, 1, 'linear');
    });
}

私はこのようなことをしようとしています:

var deferred1 = $.get(url);
var deferred2 = $('#content').fadeTo(100, 0, 'linear').promise();

$.when(deferred1, deferred2).done(function() {
    $('#content').html(page.text).fadeTo(400, 1, 'linear');
});

ただ使い方がはっきりとわかりません。そして、私は完了またはその後を使用する必要がありますか? 賢い方法でパイプを使用する必要がありますか? 必要promiseですか？

これを実装するためのより「標準化された」方法は何でしょうか?

4

1 に答える 1

6

(私は知っています、面白い文 ;))を使用する$.whenと、promise が解決される値が引数としてコールバック関数に渡されます。つまり、doneコールバックでは、最初の引数はの解決された値を参照しdeferred1、2 番目の引数はdeferred2(それが何であれ) を参照します。

これで、Ajax 成功コールバックが呼び出されると、次の 3 つの引数が渡されます。

  • 応答
  • ステータステキスト
  • jqXHRオブジェクト_

あなたは最初のものだけに興味があります。

したがって、これにより、セットアップは次のようになります。

var promise1 = $.get(url);
var promise2 = $('#content').fadeTo(100, 0, 'linear').promise();

$.when(promise1, promise2).done(function(ajax_success) {
    $('#content').html(ajax_success[0]).fadeTo(400, 1, 'linear');
});

$.whenドキュメントも参照してください。

必要promiseですか？

いいえ。jQuery コレクションを渡すと、内部的に$.when呼び出しているように見えます。.promiseしかし、そうしなければならない場合もあるので、一貫性を保つために、ここでもこれを行うのが理にかなっています ( Alnitakに感謝します)。

そして、私は...？するべきか ...？何でしょう...？

この種の問題に対する標準的な解決策はありません。Promise は信じられないほど柔軟で、非常に多くの使用方法があります。標準パターンが登場するほど長く JavaScript に存在しているとは思えません。自分にとって意味のあるものを見つけて作成し、アプリケーション内で一貫性を保ちます。

複数の promise がある場合に私が推奨する唯一のことは、それらを配列に入れることです: jQuery $.when() with variable arguments。

于 2013-04-12T11:16:07.940 に答える