Professional JavaScript For Web Developers

takes a little bit of time before that friendly yellow box appears to tell you what the button does. If you
move your mouse over the button for just a short time and then move it to another button, the tooltip
isn’t displayed. This is precisely why you would cancel a timeout before the code executes: Because you
want to wait a specified amount of time before the code is executed. If the user does something that
would result in a different outcome, you need the flexibility to cancel that timeout.
Intervals work in much the same way except that they repeat the given code indefinitely at specific time
intervals. To set up an interval, use the setInterval() method with the same type of arguments as you
use with setTimeout() — the code to execute and the number of milliseconds to wait between each
execution. For example:
setInterval(“alert(‘Hello world!’) “, 1000);
setInterval(function() { alert(“Hello world!”); }, 1000);
function sayHelloWorld() {
alert(“Hello world!”);
}
setInterval(sayHelloWorld, 1000);
Also similar to timeouts, the setInterval() method creates an interval ID to identify the code to be executed.
It can be used with the clearInterval() method to prevent any further executions. Obviously,
this is much more important when using intervals because, if left unchecked, they continue to execute
until the page is unloaded. Here is a common example of interval usage:
var iNum = 0;
var iMax = 100;
var iIntervalId = null;
function incNum() {
iNum++;
JavaScript in the Browser
}
if (iNum == iMax) {
clearInterval(iIntervalId);
}
iIntervalId = setInterval(incNum, 500);
In this code, the number iNum is incremented every 500 milliseconds until it reaches the maximum
(iMax), at which point the interval is cleared. You can use timeouts for this, eliminating the need to keep
track of a timeout ID, by doing the following:
var iNum = 0;
var iMax = 100;
function incNum() {
iNum++;
}
if (iNum != iMax) {
setTimeout(incNum, 500);
}
setTimeout(incNum, 500);
147