js rend la boucle qui se casse une fois qu'une condition est remplie

Question

Comment mettre en place une boucle de rendu setInterval qui casse, une fois qu'une condition est remplie?

Answer 1

Vous pouvez stocker l'ID d'intervalle et effacer via clearInterval(), par exemple

var timer = setInterval(myFunction, 1000); 

function myFunction() { 
    if(condition) { 
    clearInterval(timer); 
    return; 
    } 
    //do stuff 
} 

Ou si vous pouvez simplement appeler clearInterval() où le réglage de la condition, de sorte que l'intervalle suivant ne fonctionne pas, n'ayant aucune logique pour cela dans la fonction elle-même.

Answer 2

Si vous demandez comment arrêter un appel de fonction qui a été défini à l'aide de setInterval(), utilisez simplement clearInteval() function. Vous devez d'abord enregistrer une référence à la fonction setInterval et que d'utiliser cette référence pour arrêter l'intervalle:

var int=self.setInterval("your_function_name()",1000); 
if(condition){ 
    clearInterval(int) 
} 

Answer 3

clearInterval arrête la répétition de setInterval, en utilisant l'ID retourné par setInterval:

var interval = setInterval(function() { 
    // do your loop 
    if (loop_should_stop) { 
     clearInterval(interval); 
    } 
}, dt); 

Answer 4

réponse de Nick fonctionne parfaitement. Je tendis en retournant une promesse

function checkUntil(conditionFunc, millisecondsInterval) { 
    var retryCount = 0; 
    var retryCountLimit = 100; 

    var promise = new Promise((resolve, reject) => { 
     var timer = setInterval(function() { 
      if (conditionFunc()) { 
       clearInterval(timer); 
       resolve(); 
       return; 
      } 
      retryCount++; 
      if (retryCount >= retryCountLimit) { 
       clearInterval(timer); 
       reject("retry count exceeded"); 
      } 
     }, millisecondsInterval); 
    }); 

    return promise; 
} 

et vous pouvez l'appeler comme si

checkUntil(function() { 
     return document.querySelector('body'); 
    }, 500).then(function() { 
      ... 
      ... 
     }); 

    });