Javascript Setinterval Works But Not Infinite Loop

I don't understand why the infinite loop does not work but uncommenting the function call works.

Solution 1:

When you use setInterval you keep adding the function you are calling to the queue of things for the browser to do. Repaint events are also added to this queue.

When you use an infinite loop, the browser never gets to the end of the function, so it never gets around to running a repaint and the image in the document never updates.

Solution 2:

JavaScript-in-a-browser is a part of a larger construction. You need to align to the rules of this construction and don't hurt it. One of the rule is that your JavaScript must run quick and exit then. Exit means that control gets back to the framework, which does all the job, repaint the screen etc.

Try to hide and show something many times:

for (n = 0; n < 200; n++) {
  $("#test").hide();
  $("#test").show();
}

When this code runs, you won't see any flickering, you will see that the last command will have effect.

Have to say, it's not easy to organize code that way, if you want to make a cycle which paints nice anims on a canvas, you have to do it without while.

Share