Jquery Deferred 和链中的多个延迟

Question

请帮忙：

例如，我有 20 个超时，由 window.setTimeout 创建，我希望它们一个接一个地运行：

通话超时 1 => 完成通话超时 2 => 完成通话超时 3 后，依此类推。

一般有函数数组，超时次数不固定。

我的延迟函数：

function someFunction(index) {
   console.log("someFunction called, index = " + index);
   var $deferred = $.Deferred();

   window.setTimeout(function () {
       $deferred.resolve();
   }, 2000);

   return $deferred.promise();
}

for循环：

var $deferred;
$(someArray).each(function (index) {
    if (!$deferred) {
        $deferred = someFunction(index);
    } else {
        $deferred.then(function () {
            return someFunction(index);
        });
    }
});

所有其他的都立即运行而不在链中

Answer 1

如果你想一个接一个地链接它们，你必须这样做：

var $deferred;
$(someArray).each(function (index) {
    if (!$deferred) {
        $deferred = someFunction(index);
    } else {
        $deferred = $deferred.then(function () {
            return someFunction(index);
        });
    }
});

您所做的是将所有 .then() 处理程序放在同一个 deferred 上，这将使它们全部并行运行，而不是串行运行。你需要的是 p.then(...).then(...).then(...) 的等价物。由于每个.then() 都会返回一个新的promise，因此您需要链接到链中的下一个链接。

---

您可能会发现这种设计模式更简单，因为使用异步操作按顺序迭代数组会生成一个 Promise：

someArray.reduce(function(p, item) {
    return p.then(function() {
        return someFunction(item);
    });
}, $.Deferred().resolve()).then(function() {
    // all done here
});

工作演示：http://jsfiddle.net/jfriend00/uusjs3mt/

Answer 2

尝试使用$.queue()、$.dequeue()、$.map()

function someFunction(index) {
  console.log("someFunction called, index = " + index);
  var $deferred = $.Deferred();

  window.setTimeout(function() {
    $deferred.resolve();
  }, 2000);

  return $deferred.promise();
}

var someArray = [1, 2, 3, 4, 5];

$.queue(someArray, "dfd", $.map(someArray, function(value, index) {
  return function(next) {
    someFunction(index).then(next)
  }
}));
$.dequeue(someArray, "dfd");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

Answer 3

两种方法都有效：

$.queue(someArray, "dfd", $.map(someArray, function(value, index) {
  return function(next) {
    someFunction(index).then(next)
  }
}));
$.dequeue(someArray, "dfd");

和

someArray.reduce(function(p, item) {
    return p.then(function() {
        return someFunction(item);
    });
}, $.Deferred().resolve()).then(function() {
    // all done here
});