This content originally appeared on DEV Community and was authored by Ndimah Tchougoua
I know timers has been for a while a feature that a lot of folks use in their day-to-day tasks. In the JavaScript world, timers are often implemented with the setTimeout or setInterval functions, the bad news for you if you are doing it is that it's not a good practice and I will try to explain why.
Before I begin to explain my thought, I have a question for you: can you use a watch giving the wrong time ?
If your answer is yes, I'm sorry to have wasted your precious time because this article does not belong to you.
On the other hand, if your answer is negative, I will explain why using setTimeout or setInterval is like using a damaged watch to get the time.
The problem with these functions
To begin, let's consider the following snippet
function test() {
let i = 0;
setTimeout(() => console.log("hello"), 0);
while (i < 5) {
console.log("number ", i);
i += 1;
}
console.log("world");
if you run this snippet in your browser console, you will have the following result
This behavior is due to the fact that setTimeout is adding the callback in the browser's queue so that it should process it once it is idle (does not have a task to do) in other words the callback passed to the setTimeout has low priority
Now, knowing this, I imagine that it will be hard for you to implement timers using the setTimeout function because you can have 2 or even 10 ticks (depending on how busy your browser is) at the same time. This will be a nightmare to debug, but do we have a better solution ?
A way to avoid these functions
To provide a better way of implementing timers, we should use requestAnimationFrame function because it tells the browser to execute a callback before the next paint (in other words before any change in the UI occurs)
The difference here is pretty subtle, so it's better to understand it through the code. Let's take back our previous snippet and tweak it a little bit to compare setTimeout and requestAnimationFrame
function testWithAnimationFrame() {
let i = 0;
setTimeout(() => console.log("hello"), 0);
requestAnimationFrame(() => console.log("tell me the next paint"));
while (i < 5) {
console.log("number ", i);
i += 1;
}
console.log("world");
}
In this example, we can see that when running on Chrome, the setTimeout runs before requestAnimationFrame (though in some rare cases the inverse happens)
But if you run it on Firefox, this will be the output
This can seem confusing but if you pay a bit of attention, you will realize that no painting is happening during the execution, so how this scenario is handled depends on the browser.
Now if we can tweak our snippet to make the browser repaint the page, let's see what will happen
function testWithAnimationFrame2() {
let i = 0;
setTimeout(() => console.log("hello"), 0);
requestAnimationFrame(() => console.log("tell me the next paint"));
while (i < 5) {
console.log("number ", i);
i += 1;
document.body.style.backgroundColor = "red";
}
console.log("world");
}
Here is the output on Chrome
And here is the output in Firefox
As you can see in the logs, when the browser in making changes in the UI, the requestAnimationFrame function will always have priority over other scheduled callbacks.
Because on the web, we are constantly performing repaints, requestAnimationFrame is an obvious choice to implement timers.
Understanding the requestAnimationFrame function
The function only takes a callback as parameter. To provide context to the callback, it should take a timestamp indicating the time at which the previous frame has ended based on the time of the initial rendering of the page.
The function will return an integer representing the request's identifier, this can be useful if you wish to cancel the request with the cancelAnimationFrame function.
A simple implementation of a Stopwatch in JavaScript
To implement a stopwatch, there are some requirements:
- We should know after which amount of time it should tick (generally a second)
- We should know the delay of time after which the stopwatch should stop ticking
- The ticking intervals should be lesser than the delay
Taking all these requirements in considerations, the following code snippet will create a stopwatch for you
Outro
I know it might have been a long read but believe that you have enjoyed it. Anyway, if you have any questions or if you have any suggestion, feel free to reach me out.
Thank you for reading it and goodbye 👋
This content originally appeared on DEV Community and was authored by Ndimah Tchougoua
Ndimah Tchougoua | Sciencx (2024-08-11T17:20:06+00:00) You don’t need to set the time-out. Retrieved from https://www.scien.cx/2024/08/11/you-dont-need-to-set-the-time-out/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.