The Browser Object Model
Timeouts and Intervals
To create any form of animation on your web page means building some sort of delay into your processing in between each of the steps in your animation. Without a delay any animation would be run far to fast for anyone to actually see the effect.
The JavaScript commands that allow you to build a delay into your animation are a part of the Browser object Model that all of the different browsers hav implemented in effectively the same way. This means that the commands work irrespective of which browser you are using (including really old ones from before any of the javaScript standards were developed).
The two BOM commands that allow you to create animations in your web page are setTimeout() and setInterval(). The difference between the two is that setTimeout will run the requested code once ofter the specified time interval has passed while setInterval will run the specified code over and over after the specified delay.
To animate something using setTimeout() you would include another call to the same or a similar setTimeout from within the code that it will be running. This will make the code run itself again after the specified delay provided that the appropriate conditions within the code that require it to be run again is met. When you want the animation to stop you simply don't call the setTimeout again. You can terminate a setTimeout before it runs using clearTimeout() (for example if you have a tooltip that you don't want to have displayed until a certain time has passed since moving the mouse over the object you woud call a setTimeout on the mouseover event to make the tooltip display. For the mouseout event you would hide the tooltip if it has already displayed and call clearTimeout to stop it from displaying at all if it hasn't yet).
The only way to stop a setInterval from continuing to run is to call clearInterval(). The setInterval BOM function is most useful for animations that must run at specific intervals since looping with setTimeout has an additional delay while the actual code is run.
How you call these functions can also affect the efficiency of your code. Both setTimeout and setInterval take two parameters the second is the time delay in milliseconds. The first is either a text string or a function. If it is a text string then it is effectively fed into a Function() call first in order to convert the text into a function. Defining a function using Function(text) is as inefficient as using eval(text) and so passing the function as a function instead of as text is the far more efficient way of coding these calls. Here are a couple of examples:
setTimeout(function() {myFunction(a);},20)
The first of these will run the function myFunction() after 20 milliseconds, the second will do the same but will also pass a parameter a into the function when it is called. You just need to be careful because the value in a at the time myFunction is called is what will be passed and not the value that it has at the time the setTimeout is called.
