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

You may like these posts

• 
  Getting Auto Size Of Img Before Adding It To Dom (using Jquery)
• 
  Xerces Behaving Differently On Sun Jre V1.5 And Ibm J9 V1.5
• 
  How To Attach An Event Listener To The Dom, Depending Upon The Screen Size
• 
  Get Value Of Html Cells In Row Clicked With Javascript