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);
}

其中recursiveTwo只有在recursiveOne已经完成最后一次迭代时才会启动。

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

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

下一个函数回调在前一个函数中传递。不太酷。
jQuery deffered对象，它不是那么美丽，但更好一点。缺点是我仍然应该在我想用这种方式使用的每个函数中增加额外的deffered请求。

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();

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

2 个答案: