js render loop that breaks once a condition is met

Question

How do I set up a setInterval render loop that breaks, once a condition is met?

Answer 1

You can store the interval ID and clear it via clearInterval(), for example

var timer = setInterval(myFunction, 1000);

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

Or if you can just call clearInterval() where setting the condition, so the next interval doesn't run, having no logic for this in the function itself.