Better Understanding of Timers in JavaScript: SetTimeout vs RequestAnimationFrame

These days, JavaScript timer functions are widely being used by many projects. They are especially so useful when you want to delay some functions back to after other functions are executed.

In this post, I will talk about each timer functions in JavaScript, and how to or when to use them. Also lastly, I will give you a caution when you use them.

List of contents

• Introduction of Timers - setTimeout - setInterval - requestAnimationFrame
• Deeper dive into - setTimeout vs setInterval vs requestAnimationFrame
• Things to be careful

Introduction of Timers

There are four timer functions in JavaScript.

setTimeout — a function that calls a function or evaluates an expression after a specified number of milliseconds.

setInterval — a function that calls a function or evaluates an expression at specifed intervals. setInterval will continue calling the function until clearInterval is called.

requestAnimationFrame — a function working like setTimeout but which is improved by Mozilla.

setTimeout

Let’s say that you have a client who wants to print out every second for 1 minute. And he gives you an array which contains [1…60]. Now you have to print them out per second.

In this case, we can’t loop over the array as we always did, because it will just print all the numbers out at once. setTimeout takes a function as its first argument and executes it in x milliseconds that you passed to setTimeout as the second argument.

Imagine what loop function will print out.

Fill is a great method when you want to initialize an array with a certain value. In that example, the array will be filled with zero since new Array(60) returns undefined by default.

Note: fill is not fully supported in all of browsers. It isn’t supported in IE. If you also should consider using fill method in a various browsers, you should come up with a different algorithm for fill method for IE.

This is where setTimeout can be used.

Values [1…60] are printed every second as we expected and our client can also be happy! :D

setInterval

Last time he asked us to print [1…60] out, he was very satisfied with what we’ve done for him. So he asked us to do one more job for him, again. But this time, he wants to print the whole task which prints [1…60] per second repeatedly. What should we do?

Okay, I think we can reuse the first product in this task. So, the thing is, we know how to print [1…60] every second, but how can we repeat it?

function task1(array) {
  printPerSecond(array);
}

setTimeout(() => task1([1...60]), 0);
setTimeout(() => task1([1...60]), 1000);
setTimeout(() => task1([1...60]), 2000);
setTimeout(() => task1([1...60]), 3000);
setTimeout(() => task1([1...60]), 4000);
...

Well, this way doesn’t look so elegant. Because we should duplicate setTimeout(() => {}, ...) part as many times as he asked us to repeat.

In this case, you can use setInterval, which perfectly fits this situation.

Note: The way of using setInterval is exactly the same with setTimeout. So it means even though you call setInterval, it doesn’t start right away.

requestAnimationFrame

A few months later, he called us in the morning.

“I want to change the algorithm. I want to print [1…] real quick. Yes, print numbers consecutively and never stop it!”

Now he wants something different. So it isn’t printing [1…60] anymore, we should print numbers from 1. So how can we do this?

We could do this with setTimeout by executing a function that prints the given number and call itself again recursively. But this way has a performance issue. I will explain the reason to you in later of this post.

requestAnimationFrame executes a callback function whenever the browser is ready to start the next repaint task.

Note: This usage isn’t a best practice! We will talk more about this later in this post.

Copy that code and run in on your browser console or IDE. You can see the numbers are printed very fast.

Deeper Dive

Now, I think you understand the basic concept of setTimeout, setInterval, and requestAnimationFrame.

All of JavaScript timers return timestamp when they are created. This timestamp the key to finding your callback function in a list called list of active timeouts. So once you generate setTimeout with 100 milliseconds, for example, JavaScript returns timestamp after it stores your callback function in the list of active timeouts, by writing a memo on it, “Execute this in 100 milliseconds”.

You should know JavaScript is a single-thread based language, which means, only one task can be run at a time. Then what about your callback function in setTimeout?

Check out this code and run it in your browser console. Even though there’s setTimeout, which is supposed to be executed in 100 milliseconds, it doesn’t seem to be run that soon. Doesn’t it seem to take at least a few seconds to print out 'print' ? Yes. It’s because JavaScript is a single-thread based. So, since cnt was being increased by for-loop, your setTimeout had to wait until it’s done.

It means 100 milliseconds you set in setTimeout does NOT mean that the callback function will be invoked at the exact time in 100 milliseconds.

Another issue of using setTimeout(also setInterval) is that sometimes, or more than sometimes it can cause the browser to miss a frame. What does it mean?

Why is my website so slow? It’s because you didn’t respect 16ms!

You might have heard what FPS, Frame Per Second, is. This is the importance of value for making users feel that your browser isn’t slow. It isn’t actually only about the web. Animations, movies, or any other materials that should show the users something continuously, the ideal frames per second is 60. Then the users will not feel it’s slow or there’s lag.

60FPS means 60 frames per second. With this fact, we can derive that calculation.

60FPS = 60 frames per second = 16 ms per frame

The best time for a frame is 16ms, and it will not make the users bored for waiting for your page. And setTimeout that we talked about the above can’t meet this condition.

Click here to see more about this.

Conclusion

If you run animation with JS timers, I recommend you to use only requestAnimationFrames, unless there is a particular reason to use setTimeout.

Things to Be Careful

When you use timer functions in JavaScript, there is 1 thing that you MUST be aware of. It’s when to stop the timer function.

I said earlier that JavaScript timer functions return timestamp when they are generated, and it is the key to finding the callback function. Another important matter which is as important as generating timer functions and executing them is how to stop timer functions.

As you can see, setTimeout and setInterval can be stopped by calling clearTimeout and clearInterval with timestamp as the parameter. It’s always good to clear your timer function after you’re done using it.

The matter is requestAnimationFrame. Here’s the link about how requestAnimationFrame works. You can click it to get more information if you want.

… 3. Increment target’s animation frame callback identifier by one, and let handle be the result. 4. Let callbacks be target’s map of animation frame callbacks. …

While setTimeout is executed in x milliseconds (technically, x + y milliseconds as I explained earlier in this post), requestAnimationFrame keeps staying in the list called animation frame request callback list.

The more you create requestAnimationFrame, the more handlers will be in the list. And you MUST get rid of it from the list every time after the callback function is invoked.

Note that cancelAnimationFrame, which gets rid of callback function from the list, is called every time before new requestAnimationFrame is generated.

When I used to work on a dashboard, using Canvas, I didn’t call cancelAnimationFrame. What happened later? The timer identifier became over 2M because the web browser wasn’t closed for a few days. The page was completely stopped, and it made me stuck in that problem over five days to solve it.

Thank you for reading my post! I hope you understand JavaScript timer functions.