22

我正在尝试创建我认为被称为“瀑布”的东西。我想按顺序处理一组异步函数（jQuery 承诺）。

这是一个人为的例子：

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 令人困惑，因为它是为动画设计的，你也可能在你的其他地方使用 $.Deferred's代码）。它还具有通过异步操作中的 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 回答
0

确实很有趣的挑战。我想出的是一个递归函数，它接受一个列表和一个可选的起始索引。

这是我用几个不同的列表长度和间隔测试过的 jsFiddle 的链接。

我假设您有一个返回承诺的函数列表（不是数字列表）。如果您确实有数字列表，则可以更改此部分

$.when(tasks[index]()).then(function(){
    deferredSequentialDo(tasks, index + 1);
});

对此

/* Proxy is a method that accepts the value from the list
   and returns a function that utilizes said value
   and returns a promise  */
var deferredFunction = myFunctionProxy(tasks[index]);

$.when(tasks[index]()).then(function(){
    deferredSequentialDo(tasks, index + 1);
});

我不确定您的函数列表有多大，但请注意浏览器将保留第一次 deferredSequentialDo 调用中的资源，直到它们全部完成。

于 2013-03-19T17:23:17.360 回答
0

论据

  • items：参数数组
  • func：异步函数
  • 回调：回调函数
  • 更新：更新功能

简单循环：

var syncLoop = function(items, func, callback) {
    items.reduce(function(promise, item) {
        return promise.then(func.bind(this, item));
    }, $.Deferred().resolve()).then(callback);
};

syncLoop(items, func, callback);

跟踪进度：

var syncProgress = function(items, func, callback, update) {
    var progress = 0;
    items.reduce(function(promise, item) {
        return promise.done(function() {
            update(++progress / items.length);
            return func(item);
        });
    }, $.Deferred().resolve()).then(callback);
};

syncProgress(items, func, callback, update);
于 2019-01-09T21:55:44.990 回答