前の関数の終了後に関数呼び出しを発行する

Question

関数を順番に実行するシステムを作った。 prev関数の終了後に関数を実行するためにwaitAndExecuteを導入しました。どのようにwaitAndExecute関数が動作するかを示すjsfiddleを作成します。 （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); 
     }) 
     }); 
    } 
}); 

RESULTは私が

を望んでいた

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>