2

我有一个关于 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 延迟对象，它也不是那么漂亮，但更好一点。缺点是我仍然应该在我想以这种方式使用的每个函数中增加额外的延迟请求。
4

2 回答 2

4

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

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

于 2012-10-11T12:29:41.903 回答
1

您必须使用回调或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();
于 2012-10-11T12:49:53.240 回答