js render loop que se rompe una vez que se cumple una condición

Question

¿Cómo configuro un loop de renderizado setInterval que se rompe, una vez que se cumple una condición?

Answer 1

Usted puede almacenar el ID de intervalo y desactivarla a través clearInterval(), por ejemplo

var timer = setInterval(myFunction, 1000); 

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

O si puede simplemente llamar al clearInterval() donde establece la condición, para que el siguiente intervalo no se ejecute, ya que no tiene lógica para esto en la función misma.

Answer 2

Si pregunta cómo detener una llamada de función que se ha configurado utilizando setInterval(), simplemente use clearInteval() function. Primero tiene que guardar una referencia a la función setInterval y de utilizar esta referencia para detener el intervalo:

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

Answer 3

clearInterval detiene la repetición de setInterval, utilizando el ID devuelto por setInterval: Respuesta

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

Answer 4

de Nick funciona perfectamente. Me extendí devolviendo una promesa

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

y se puede invocar al igual que

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

    });