js Rendern Schleife, die bricht, sobald eine Bedingung erfüllt ist

Question

Wie richte ich eine setInterval Render-Schleife, die bricht, sobald eine Bedingung erfüllt ist?

Answer 1

Sie können das Intervall ID speichern und löschen es über clearInterval() zum Beispiel

var timer = setInterval(myFunction, 1000); 

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

Oder wenn Sie einfach clearInterval() aufrufen können, wo die Bedingung eingestellt ist, so dass das nächste Intervall nicht ausgeführt wird, keine Logik dafür in der Funktion selbst.

Answer 2

Wenn Sie fragen, wie Sie einen Funktionsaufruf stoppen können, der mit setInterval() eingestellt wurde, verwenden Sie einfach clearInteval() function. Sie müssen zuerst einen Verweis auf die setInterval-Funktion speichern und als diese Referenz verwenden, um das Intervall zu stoppen:

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

Answer 3

clearInterval stoppt die Wiederholung von setInterval, durch setInterval die ID zurückgegeben werden:

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

Answer 4

Antwort Nicks perfekt funktioniert. Ich erweiterte sie durch ein Versprechen

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; 
} 

zurückkehren und Sie können es aufrufen wie so

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

    });