3

jQuery のDeferredシステムの用途の 1 つは、$.when()関数を使用することです。可変数のPromise's and will do something when they allリゾルブ(or when the firstリジェクトが必要です。)

JSONたとえば、2 つの Ajaxクエリを操作したい場合は、次のようにします。

var funkyPromise = $.getJSON('http://funky.json.service.com');
var awesomePromise = $.getJSON('http://awesome.json.service.com');

$.when(funkyPromise, awesomePromise).then(function() {
  /* do something amazing with the two objects */
}, function() {
  /* at least one of the services failed this time */
});

jQuery のシステムでできるもう 1 つのことは、最終的にメソッドを使用する前に、メソッドを使用して、あるデータから別Deferredのデータに「連鎖」することにより、データ パイプラインを作成することです。Deferredpipe

$.getJSON('http://funky.json.service.com')
  .pipe(funkytoFunkier);
}).done(function(funkyData) {
    /* we now have a funkier version of what the web service gave us */
});

すべてが見事に非同期で分離されています。

$.when()しかし、2 つの非同期s で使用したいのにPromise、非同期で渡されるため、まだ 1 つも持っていない場合はどうなりpipeますか?

var funkyPromise = $.getJSON('http://funky.json.service.com');
var awesomePromise = $.getJSON('http://awesome.json.service.com');

// run "funky" through an asynchronous "pipe" to get "funkier"
//
// ... but ... how ??

$.when(funkyier, awesome).then(function() {
  /* do something amazing with the two objects */
}, function() {
  /* at least one of the services failed this time */
});

では、中間セクションには何が入りますか?

  • それは盲目的に明白で、私には見えないだけですか？
  • それは可能ですが、非常に微妙でトリッキーなものですか？
  • pipe()またはなどの新しい「反転」同等物は$.when()それをより簡単にしますか？
4

2 に答える 2

3

pipe()は、パイプが解決されたときに解決される新しい promise を返すため、次のように記述するだけで済みます。

var funkyPromise = $.getJSON('http://funky.json.service.com');
var awesomePromise = $.getJSON('http://awesome.json.service.com');

$.when(funkyPromise.pipe(funkytoFunkier), awesomePromise).then(function() {
  /* do something amazing with the two objects */
}, function() {
  /* at least one of the services failed this time */
});

jQuery 1.8 以降でthen()は と同じことをpipe()行うため、2 つのメソッドは基本的に互換性があることに注意してください。

于 2012-09-05T14:36:48.467 に答える
1

@Frédéric Hamidiは正しい答えを知っていましたが、私はそれを理解しなければなりませんでした(-:.Frédéricが答えを書いた後、それを読む前に私が取り組んだ簡単な例を次に示します:

>> jsFiddle ... 

function foo() {
    var time = Math.floor(Math.random() * 3000),
        d = $.Deferred();

    console.log('foo starting: ' + time);
    setTimeout(function() {
        console.log('foo resolving');
        d.resolve(time);
    }, time);

    return d.promise();
}

function bar() {
    var time = Math.floor(Math.random() * 500),
        d = $.Deferred();

    console.log('bar starting: ' + time);
    setTimeout(function() {
        console.log('bar resolving');
        d.resolve(time);
    }, time);

    return d.promise();
}

function baz(previousTime) {
    var time = Math.floor(Math.random() * 500),
        d = $.Deferred();

    console.log('baz starting: ' + time);
    setTimeout(function() {
        console.log('baz resolving');
        d.resolve(previousTime + ' + ' + time + ' = ' + (previousTime + time));
    }, time);

    return d.promise();
}

$.when(foo(), bar().pipe(baz))
    .then(function(foo, barBaz) {
        console.log('when OK', [foo, barBaz]);
    });​
于 2012-09-05T16:06:51.613 に答える