6. Timers

By default, your code runs synchronously. That is a fancy of way of saying that when a statement needs to execute, it executes immediately. There are no ifs, ands, or buts about it. The concept of delaying execution or deferring work to later isn’t a part of JavaScript’s default behavior. That doesn’t mean the ability to delay work to a later time doesn’t exist! If you swerve just slightly off the main road, there are three functions that allow you to mostly do just that (and more). Those functions are setTimeout, setInterval, and requestAnimationFrame.

In this chapter, we look at what each of these function do and other good stuff that comes along with learning more about some of the basic components JavaScript provides for helping your code do interesting things.

Onwards!

Putting that into JavaScript, it looks something like this:

Click here to view code image

var timeID = setTimeout(someFunction, delayInMilliseconds);

Going a bit more example-ish, if I wanted to call a function called showAlert after 5 seconds, the setTimeout declaration would look as follows:

Click here to view code image

function showAlert() {
  alert("moo");
}

var timeID = setTimeout(showAlert, 5000);

Pretty simple, right? Now, let’s talk about something less interesting that I cover just for completeness. That something has to do with the timeID variable that is initialized to our setTimeout function. It isn’t there by accident. If you ever wanted to access this setTimeout timer again, you need a way to reference it. By associating a variable with our setTimeout declaration, we can easily accomplish that.

Now, you may be wondering why we would ever want to reference a timer once we’ve created it. There aren’t too many reasons. The only reason I can think of would be to cancel the timer. For setTimeout, that is conveniently accomplished using the clearTimeout function and passing the timeout ID as the argument:

clearTimeout(timeID);

If you are never planning on cancelling your timer, you can just use setTimeout directly without having it be part of the variable initialization.

Anyway, moving past the technical details on how to use setTimeout, let’s talk about when you would commonly use it in the real world. As you will find out eventually, especially if you are doing front-end/user interface (UI) development, deferring some action to a later time is more common than you might think. Here are some examples that I ran into just in the recent past:

1. A menu slides in, and after a few seconds of the user no longer playing with the menu, the menu slides away.

2. You have a long running operation that is unable to complete, and a setTimeout function interrupts that operation to return control back to the user.

3. My favorite is where you use the setTimeout function to detect whether a user is inactive or not (See: http://bit.ly/kirupaDetectIdle).

If you do a search for setTimeout on this site or Google, you’ll see many more real-world cases where setTimeout proves very useful.

Here is how you would use the setInterval function:

Click here to view code image

var intervalID = setInterval(someFunction, delayInMilliseconds);

Except for the function name, the way you use setInterval is even identical to setTimeout. The first argument specifies the inline code or function you would like to execute. The second argument specifies how long to wait before your code loops again. You can also optionally initialize the setInterval function to a variable to store an interval ID—an ID that you can later use to do exciting things like cancel the looping.

OK! Now that we’ve seen all that, here is an example of this code at work for looping a function called drawText with a delay of 2 seconds between each loop:

Click here to view code image

Just make sure you have a p element somewhere in your page that will act as the target our code will add the # character to.

If you wish to cancel the looping, you can use the appropriately named clearInterval function:

clearInterval(intervalID);

Its usage is similar to its clearTimeout equivalent. You pass in the ID of the setInterval timer instance that you optionally retrieved while setting up your setInterval in the first place.

Here is some interesting trivia. For the longest time, setInterval was the primary function you had for creating animations in JavaScript. To get something running at 60 frames a second, you would do something that looks as follows:

Click here to view code image

// 1000 divided 60 is the millisecond value for 60fps
window.setInterval(moveCircles, 1000/60);

Towards the end of this chapter, you’ll see some links to examples and articles I’ve written on the web where setInterval is part of a larger, more realistic example.

When you have code that is designed to animate something to the screen, you want to ensure your animation code runs properly without getting lost in the shuffle of everything else your browser is doing. Using the setInterval function mentioned earlier doesn’t guarantee that frames won’t get dropped when the browser is busy optimizing for other things. To avoid your animation code from being treated like any other generic piece of code, you have the requestAnimationFrame function. This function gets special treatment by the browser. This special treatment allows it to time its execution perfectly to avoid dropped frames, avoid unnecessary work, and generally steer clear of other side effects that plague other looping solutions.

The way you use this function starts off a bit similar to setTimeout and setInterval:

Click here to view code image

var requestID = requestAnimationFrame(someFunction);

The only real difference is that you don’t specify a duration value. The duration is automatically calculated based on the current frame rate, whether the current tab is active or not, whether your device is running on battery or not, and a whole host of other factors that go beyond what we can control or understand.

Anyway, this usage of the requestAnimationFrame function is merely the textbook version. In real life, you’ll rarely make a single call to requestAnimationFrame like this. Key to all animations created in JavaScript is an animation loop, and it is this loop that we want to throw requestAnimationFrame at. The result of that throw looks something as follows:

Click here to view code image

function animationLoop() {
  // animation-related code

  requestAnimationFrame(animationLoop);
}

// start off our animation loop!
animationLoop();

Notice that our requestAnimationFrame calls the animationLoop function fully from within the animationLoop function itself. That isn’t a bug in the code. While this kind of circular referencing would almost guarantee a hang, requestAnimationFrame’s implementation avoids that. Instead, it ensures the animationLoop function is called just the right amount of times needed to ensure things get drawn to the screen to create smooth and fluid animations. It does so without freezing the rest of your application functionality up.

To stop a requestAnimationFrame function, you have the cancelAnimationFrame function:

Click here to view code image

cancelAnimationFrame(requestID);

Just like you’ve seen several times with functions of this sort, cancelAnimationFrame takes the ID value of our requestAnimationFrame function that is returned when you call it. If you plan on using cancelAnimationFrame, then you can modify our earlier animationLoop example as follows:

Click here to view code image

var requestID;

function animationLoop() {
  // animation-related code

  requestID = requestAnimationFrame(animationLoop);
}

// start off our animation loop!
animationLoop();

Notice that our call to requestAnimationFrame always sets the value of requestID, and you can use requestID as the argument to cancelAnimationFrame to stop our loop.