• Choose a category
• All
• Classic-Fiction

By Root 1086 0

regular frequency. This will be the case with the next few slideshows we’re going to build: we want to rotate automatically through a series of images, displaying a new one every few seconds.

Unlike many other areas of the library, there’s been no need for jQuery to expand on JavaScript’s timer functionality; the basic JavaScript methods are simple, flexible, and work across browsers. There are two of them: setTimeout and setInterval.

The timer functions both work the same way: they wait a certain amount of time before executing the code we give them. The syntax used to call them is also much the same:

setTimeout(, );

setInterval(, );


The key difference is that setTimeout will wait the specified period of time, run the code we give it, and then stop. setInterval, on the other hand, will wait, run the code—then wait again and run the code again—repeating forever (or until we tell it to stop). If the code we pass it updates a visible property of an element, and the delay we assign it is relatively small, we can achieve the illusion of animation. In fact, behind the scenes, this is what jQuery is doing when we use any of its animation functions!

Timers can be tricky to use correctly, largely because they cause problems of scope, which we’ll discuss in more detail in the section called “Scope” in Chapter 6. However, we want to master them, as timers are the key to freeing our pages from the tyranny of user-initiated events!

Setting up a Timer

Here’s a small example to demonstrate timers at work: we’ll simply move a green box smoothly across the screen. Of course, we could rely on jQuery’s animate method to do this for us, but we want to learn what is really going on in the JavaScript. This will involve positioning a square div and continuously updating its left CSS property. Let’s set up our boxes:

chapter_04/05_timers/index.html (excerpt)


The boxes are sitting still; to animate them we’re going to need a timer. We’ll use the setInterval timer, because we want our code to be executed repeatedly:

chapter_04/05_timers/script.js (excerpt)

var greenLeft = parseInt($('#green').css('left'));

setInterval(function() {

$('#green').css('left', ++greenLeft);

}, 200);


Our div moves slowly across the screen: every 200 milliseconds, we’re pushing it a pixel to the right. Changing the size of the delay affects the speed of the animation. Be careful, though: if you set the delay very low (say, less than 50 milliseconds) and you’re doing a lot of DOM manipulation with each loop, the average user’s browser will quickly grind to a halt. This is because their computer is not given enough time to do everything you asked it to before you come around asking it again. If you think your code might be at risk, it’s best to test it on a variety of machines to ensure the performance is acceptable.

It’s also possible to replicate setInterval’s functionality using the setTimeout function, by structuring our code a bit differently:

chapter_04/05_timers/index.html (excerpt)

var redLeft = parseInt($('#red').css('left'));

function moveRed() {

setTimeout(moveRed, 200);

$('#red').css('left', ++redLeft);

}

moveRed();


Here we have a function called moveRed, inside of which we have a setTimeout timer that calls … moveRed! As setTimeout only runs once, it will only call moveRed once. But because moveRed contains the timer call, it will call itself again and again—achieving the same result as setInterval.

Stopping Timers

Usually it’s undesirable (or unnecessary) for our timers to run forever. Thankfully, timers that you start running can be forced to stop by calling the appropriate JavaScript command, clearInterval or clearTimeout:

clearInterval();

clearTimeout();


To call either of these functions you need to pass in the timer’s ID. How do we know what the ID is? The ID is an integer number that’s assigned to the timer when you create