22

「滝」と呼ばれるものを作成しようとしています。非同期関数の配列を順次処理したい (jQuery promises)。

これは不自然な例です:

function doTask(taskNum){
    var dfd = $.Deferred(), 
        time = Math.floor(Math.random()*3000);

    setTimeout(function(){
        console.log(taskNum);
        dfd.resolve();
    },time)

    return dfd.promise();
}

var tasks = [1,2,3];

for (var i = 0; i < tasks.length; i++){
    doTask(tasks[i]);
}

console.log("all done");

実行された順序でタスクを完了したいと思います(配列に存在します)。したがって、この例では、タスク 1 を実行して解決するのを待ってから、タスク 2 を実行して解決するのを待ち、タスク 3 などを実行して、「すべて完了」をログに記録します。

多分これは本当に明白ですが、私は午後中ずっとこれを理解しようとしていました.

4

6 に答える 6

22

$().queueここの代わりに使ってみ$.Deferredます。関数をキューに追加し、準備ができたときにのみ次の関数を呼び出します。

function doTask(taskNum, next){
    var time = Math.floor(Math.random()*3000);

    setTimeout(function(){
        console.log(taskNum);
        next();
    },time)
}

function createTask(taskNum){
    return function(next){
        doTask(taskNum, next);
    }
}

var tasks = [1,2,3];

for (var i = 0; i < tasks.length; i++){
    $(document).queue('tasks', createTask(tasks[i]));
}

$(document).queue('tasks', function(){
    console.log("all done");
});

$(document).dequeue('tasks');
于 2013-03-19T18:08:28.683 に答える
9

ウォーターフォールの場合、非同期ループが必要です。

(function step(i, callback) {
    if (i < tasks.length)
        doTask(tasks[i]).then(function(res) {
            // since sequential, you'd usually use "res" here somehow
            step(i+1, callback);
        });
    else
        callback();
})(0, function(){
    console.log("all done");
});
于 2013-03-19T17:26:40.217 に答える
8

解決済みの $.Deferred を作成し、反復ごとにチェーンに追加するだけです。

var dfd = $.Deferred().resolve();
tasks.forEach(function(task){
    dfd = dfd.then(function(){
        return doTask(task);
    });
});

段階的に次のことが起こっています。

//begin the chain by resolving a new $.Deferred
var dfd = $.Deferred().resolve();

// use a forEach to create a closure freezing task
tasks.forEach(function(task){

    // add to the $.Deferred chain with $.then() and re-assign
    dfd = dfd.then(function(){

        // perform async operation and return its promise
        return doTask(task);
    });

});

個人的には、これは再帰よりもクリーンで、$().queue よりもなじみがあると思います ($().queue の jQuery API は、アニメーション用に設計されているため混乱を招きます。コード）。また、非同期操作で resolve() を介してウォーターフォールに結果を標準転送し、$.done プロパティを添付できるという利点もあります。

ここではjsFiddleにあります

于 2015-11-21T03:19:20.540 に答える
5

遅延オブジェクトを実行するための$.whenメソッドとthenメソッドを見てください。

ウォーターフォールは、戻り値を遅延されたものから次のものに順番にパイプするために使用されます。これは次のようになります。

function doTask (taskNum) {
  var dfd = $.Deferred(),
      time = Math.floor(Math.random() * 3000);

  console.log("running task " + taskNum);

  setTimeout(function(){
      console.log(taskNum + " completed");
      dfd.resolve(taskNum + 1);
  }, time)

  return dfd.promise();
}

var tasks = [1, 2, 3];

tasks
  .slice(1)
  .reduce(function(chain) { return chain.then(doTask); }, doTask(tasks[0]))
  .then(function() { console.log("all done"); });

に渡される引数に注意してくださいresolve。これは、チェーン内の次の関数に渡されます。引数をパイプせずに連続して実行したいだけの場合は、それを取り出してreduce呼び出しを次のように変更できます.reduce(function(chain, taskNum) { return chain.then(doTask.bind(null, taskNum)); }, doTask(tasks[0]));

並行して、次のようになります。

var tasks = [1,2,3].map(function(task) { return doTask(task); });

$.when.apply(null, tasks).then(function() { 
    console.log(arguments); // Will equal the values passed to resolve, in order of execution.
});
于 2013-03-19T17:52:30.303 に答える