setIntervalが最初の呼び出しをスキップし、Javascriptが呼び出されたときにClearintervalが停止しない

Question

1秒ごとに別の関数を呼び出すタイマーを作成しようとしています。だから、forループ内でsetIntervalを使用しています。

forループで最初のループスルー中にsetIntervalがスキップされています。 理由がわかりません。

また、 私はそれがゼロ以下になると間隔をクリアする機能を持っています。停止条件内でメッセージを印刷すると、その出力はクリアされますが、clearIntervalはスキップされます。

function changesystem(lottery, maxroundtime, firstloop) { 
 
    //loop through lottery numbers 
 
    for (var keys in lottery) { 
 
    var currentnum = lottery[keys].LotteryNum; 
 
    console.log(currentnum); 
 
    var currentclass = lottery[keys].ClassID; 
 

 
    //console.log(currentclass); 
 

 
    //display values 
 
    $('#CurrentNumber').text(currentnum); 
 
    $('#CurrentClass').text(currentclass); 
 

 
    //change progress bar 
 
    //every second until reaches max round time 
 

 
    // var loopcontrol = maxroundtime; 
 
    var loopcontrol = 5; 
 
    var timerloop = setInterval(function() { 
 

 
     console.log(loopcontrol); 
 

 
     //changetime(maxroundtime,firstloop); 
 
     loopcontrol--; 
 
     //firstloop=1; 
 

 
    }, 1000); 
 

 
    if (loopcontrol < 0) { 
 
     clearInterval(timerloop); 
 
    } 
 
    }

Visual Example

Answer 1

あなたは非同期コードは現在の実行コードを停止しないことを考慮に入れる必要があります。 setIntervalに渡すコールバック関数は、の後にという非同期に呼び出されます。現在実行中のコードは、call-stackが空になるまで終了します。

だからsetIntervalは何秒も経過するまで待たない。 forループはすべての反復を直ちに実行し、setIntervalタイマーを作成した後、すべてがになり、これまでどおりに実行されます。コードclearIntervalは決して実行されません。

ここでは、非同期的な "ループ"を使用して、つまり非同期で何度も呼び出される関数を使用して、それを行う方法を説明します。

function changesystem(lottery,maxroundtime,firstloop){ 
    //loop asynchronously through lottery numbers 
    (function loop(keys) { 
     if (!keys.length) return; // all done 
     var key = keys.shift(); // extract next key 
     var currentnum = lottery[key].LotteryNum; 
     console.log('lottery number', currentnum); 
     var currentclass = lottery[key].ClassID; 
     //display values 
     $('#CurrentNumber').text(currentnum); 
     $('#CurrentClass').text(currentclass); 
     //change progress bar asynchronously 
     //every second until reaches max round time 
     (function progress(loopControl) { 
      console.log('loopControl', loopControl); 
      if (!loopControl) { 
       loop(keys); // done: continue with next lottery number 
      } else { // schedule next progress tick 
       setTimeout(progress.bind(null, loopControl-1), 1000); 
      } 
     })(5); // start with loopControl 5 
    })(Object.keys(lottery)); // pass all keys 
}