Question

我制作了一个系统，用于按顺序运行的功能。我介绍了waitAndExecute以在prev函数完成后运行一个函数。 BUILT 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

使用呼叫间隔进行呼叫功能。不要用于循环。

＆＃13;

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

＆＃13;

<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>

＆＃13;

上一个功能完成后发出调用函数

1 个答案: