setInterval étant ignoré le premier appel et Clearinterval ne s'arrêtant pas lorsqu'il est appelé Javascript

Question

J'essaye de créer un temporisateur que chaque seconde il appelle une autre fonction. J'utilise donc setInterval dans une boucle for.

Le paramètre setInterval est ignoré lors de la première boucle de la boucle for. Je ne sais pas pourquoi.

Aussi, J'ai la fonction pour effacer l'intervalle quand il descend en dessous de zéro. Lorsque j'ai un message d'impression dans la condition d'arrêt, cela sort mais clearInterval est ignoré.

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

Vous devez prendre en compte le fait que le code asynchrone ne s'arrête pas le courant d'exécution de code. La fonction de rappel que vous transmettez à setInterval est appelée de manière asynchrone, c'est-à-dire après le code en cours d'exécution est terminé jusqu'au point où la pile d'appels est vide.

Donc, setInterval n'attend pas que les secondes passent. La boucle for passera immédiatement par toutes les itérations, ayant créé autant de minuteurs setInterval, qui commenceront à cocher ensuite, et continueront à le faire pour toujours. Le code clearInterval ne sera jamais exécuté.

Voici comment vous pourriez le faire, en utilisant des "boucles" asynchrones, c'est-à-dire avec des fonctions qui sont appelées plusieurs fois, de manière asynchrone.

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 
}