如何使用 JS/jQuery 对 setTimeout 设置的多个函数进行排队

Question

我有一个关于 JS 的工作流，它应该通过 setTimeout 函数一个一个地运行几个集合。如何使用 JS/jQuery 来完成，最好以一些简单而美观的方式？

看起来像这样

function recursiveOne(arg1){
  if (allRight) return;

  doSomething();
  andAnotherOne();
  setTimeout(function(){recursiveOne(arg1)}, 3000);
}

function coreFunction(){
  recursiveOne(arg1);
  recursiveTwo(arg2);
  recursiveThree(arg3);
}

只有当 recursiveOne 已经完成最后一次迭代时才应该开始 recursiveTwo。

不好的部分是所有功能都通过 setTimeout 工作，因为我需要等待来自后端的反应，并且无法直接接收它 - 只能通过 HTML 源。

可能的解决方案，我可以看到：

• 下一个函数回调在前一个函数中正确传递。不太酷。
• jQuery defered 对象，它也不是那么漂亮，但更好一点。缺点是我仍然应该在我想以这种方式使用的每个函数中增加额外的延迟请求。

Answer 1

您需要将函数作为回调发送

function recursiveOne(arg1, callback){
  if (allRight) callback();

  doSomething();
  andAnotherOne();
  setTimeout(function(){recursiveOne(arg1, callback)}, 3000);
}


function coreFunction(){
    recursiveOne(arg1, function(){
        recursiveTwo(arg2)
    });

}

（旁注）我记得这个项目在做异步工作时帮助了我很多：

https://github.com/caolan/async

Answer 2

您必须使用回调或直接调用coreFunction。您可以在下面找到一种使用函数数组的方法。

function recursiveOne(arg1){
   if(arg1 < 5){
      arg1++;
      setTimeout(function(){recursiveOne(arg1);}, 500);
   }else{
      console.log("func1 complete");
      coreFunction();
   }
}

function recursiveTwo(arg1){
   if(arg1 < 10){
      arg1++;
      setTimeout(function(){recursiveTwo(arg1);}, 500);
   }else{
      console.log("func2 complete");
      coreFunction();
   }
}

function recursiveThree(arg1){
    if(arg1 < 20){
      arg1++;
      setTimeout(function(){recursiveThree(arg1);}, 500);
   }else{
      console.log("func3 complete");
      coreFunction();
   }
} 

var funcSet = [recursiveOne, recursiveTwo, recursiveThree];
var funcArgs = [[1], [5], [10]];

function coreFunction(){
   if(funcSet.length){
       var func = funcSet.shift();
       func.apply(window, funcArgs.shift())
   }
}
coreFunction();