上一個功能完成後發出調用函數

Question

我做了一個函數按順序運行的系統。 我介紹waitAndExecute在prev函數完成後運行一個函數。內置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 = \t 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 = \t 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 = \t 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 = \t 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 = \t 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>