JavaScript Timers

Timing Functions

There are three built-in JavaScript functions that we could use for deferred and optionally repeated execution of functions.

• setTimeout
• setInterval
• window.requestAnimationFrame

requestAnimationFrame

window.requestAnimationFrame(callback)

asks the browser to perform an animation based on the function supplied as the argument. This callback function is invoked before the screen is repainted.

• it has a single argument, callback, which draws the frame
• requestAnimationFrame must be called for every frame that you want to animate
• (that means that it must be called repeatedly)
• typically, the resulting animation is 60 frames per second
  • but the rate at which the callback is invoked may be adjusted based on resource utilization and priority
  • for example, the frame rate may drop if it's not the currently active tab

Animation Example

Here's how window.requestAnimationFrame(callback) could be used to move the content div horizontally in our sample page from a previous set of slides:

• the div is animated by changing the left property value (which is a string that ends in px)
• note that the callback function must tell the browser to continue to animate by calling requestAnimationFrame

let pos = 0;
window.requestAnimationFrame(animate);
function animate() {
	console.log('I am being animated!')
	const c = document.getElementById('content')
	c.style.left = pos + 'px';
	pos += 1;
	window.requestAnimationFrame(animate);
}

Let's Try It Elsewhere…

Open up a page… and modify the following code in the developer console to animate an element off screen!

let pos = 0;
const ele = document.getElementsByClassName('className')[0];
ele.style.position = 'relative';
ele.style.zIndex = 1000;
function move() {
	ele.style.top = pos + 'px';
	pos += 1
	window.requestAnimationFrame(move);
}
window.requestAnimationFrame(move)

setInterval, setTimeout

A couple of other timing functions are:

• setInterval(callback, delay)
  • calls callback in delay ms
  • continues to call the callback repeatedly at specified interval
• setTimeout(callback, delay)
  • calls callback in delay ms
  • only invokes callback once

Using setInterval/setTimeout

The following example uses set interval to:

• insert an h1 tag containing the current date/time
• … into the nyu homepage
• … every 2 seconds:

setInterval(function() {
	const header = document.getElementsByClassName('header')[0];
	header.appendChild(document.createElement('h1')).innerText = Date();
}, 2000);

When to Use Each

What reasons would you choose to use one timing function (requestAnimationFrame, setTimeout and setInterval) over the others?. This may be obvious, but… →

For animation, use requestAnimationFrame because:

• allows browser to make optimizations
• consequently more efficient
• (for example, Chrome will throttle setInterval)

Maybe setInterval, setTimeout… when you need to specify the timing of a function call (though may be unreliable based on throttling!)