javascript - 在上一个函数完成后发出调用函数

Question

我制作了一个函数按顺序运行的系统。我引入了 waitAndExecute 在上一个函数完成后运行函数。构建了 jsfiddle，它显示了 waitAndExecute 函数的工作原理。 (https://jsfiddle.net/wjuj7o8h/2/)

它与某些功能配合良好(在 jsfiddle startTest1 中)。但是在引入 for 循环之后，它永远不会工作(在 jsfiddle startTest2 中)。

HTML

<textarea id="textarea" rows="25" cols="50">
</textarea>
<button id="startTest"> start Testing </button>

JavaScript

lastIndex = 0;
function waitAndExecute(condition, callback, interval = 30, maxcount = 100, errorcallback = function(){ alert("time limit");}){
 var Interval_count = 0;
 var Interval_ID = setInterval(function(){
      if(condition()){
        callback();
        clearInterval(Interval_ID);
      }
      Interval_count += 1;
      if(Interval_count > maxcount){
          clearInterval(Interval_ID);
          errorcallback();
      }
   },interval);
}
function compareTwo(x, y){
  return x == y;
}
$('#startTest').click( function(){
  var a = 1;
  var syncMonitor = 0;
  for(var i = 1; i < 10; i++){
     waitAndExecute(
       function(){ 
         return compareTwo(lastIndex, i-1);
       },
       function(){

         setTimeout(function(){
           a = i * 100 + 1;
           document.getElementById("textarea").value =  document.getElementById("textarea").value + a.toString();
           syncMonitor = 1;
         },30);
         waitAndExecute(function(){ return syncMonitor;},function(){
           syncMonitor = 0;
           setTimeout(function(){
             a = i * 100 + 2;
             document.getElementById("textarea").value =    document.getElementById("textarea").value + a.toString();
             syncMonitor = 1;
             lastIndex = i;
           },30);
         })
       });
  }
});

我想要的结果

101 102 (30ms)
201 202 (60ms)
301 302 (90ms)
401 402 (120ms)
501 502 (150ms)
601 602 (180ms)
701 702 (210ms)
801 802 (240ms)
901 902 (270ms)

当前结果:

提醒时间限制

问题:
我怎样才能更容易地构建这个系统或者如何解决这个问题？

Answer 1

使用调用间隔来进行函数调用。不要使用 for 循环。

lastIndex = 0;
function waitAndExecute(condition, callback, interval = 30, maxcount = 100, errorcallback = function(){ alert("time limit");}){
 var Interval_count = 0;
 var Interval_ID = setInterval(function(){
      if(condition()){
        callback();
        clearInterval(Interval_ID);
      }
      Interval_count += 1;
      if(Interval_count > maxcount){
          clearInterval(Interval_ID);
          errorcallback();
      }
   },interval);
}
function compareTwo(x, y){
// document.getElementById("textarea").value = 	document.getElementById("textarea").value + "CompareTwo" + x.toString() + " " + y.toString() +"\n";
  return x == y;
}
$('#startTest1').click( function(){
  var a = 1;
  var syncMonitor = 0;
  setTimeout(function(){
    a = 50 + 1;
    document.getElementById("textarea").value = 	document.getElementById("textarea").value + a.toString() + "\n";
    syncMonitor = 1;
  },30);
  waitAndExecute(function(){ return syncMonitor;},function(){
    syncMonitor = 0;
    setTimeout(function(){
      a = 50 + 2;
      document.getElementById("textarea").value = 	document.getElementById("textarea").value + a.toString() + "\n";
    },30);
   });
 });
$('#startTest2').click( function(){
var callCount = 1;
callfunction();
var repeater = setInterval(function () {
  if (callCount < 10) {
    callfunction();
    callCount += 1;
  } else {
    clearInterval(repeater);
  }
}, 1000);
  var a = 1;
  var syncMonitor = 0;
  var i = 1;
  function callfunction(){
     waitAndExecute(
       function(){ 
         return compareTwo(lastIndex, callCount-1);
       },
       function(){
       
         setTimeout(function(){
           a = callCount * 100 + 1;
           document.getElementById("textarea").value = 	document.getElementById("textarea").value + a.toString();
           syncMonitor = 1;
         waitAndExecute(function(){ return syncMonitor;},function(){
           syncMonitor = 0;
          },30);
           setTimeout(function(){
             a = callCount * 100 + 2;
             document.getElementById("textarea").value = 	document.getElementById("textarea").value + a.toString();
             syncMonitor = 1;
             lastIndex = callCount;
           },30);
         })
       });
       }
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="25" cols="50">
</textarea>
<button id="startTest1"> start Testing1 </button>
<button id="startTest2"> start Testing2 </button>