33 Javascript Concepts — #10. setTimeout, setInterval and requestAnimationFrame
First of all, this story is based on Stephen Curtis -33 Fundamentals Every Javascript Developer Should Know and you can read it here.
I thought it is great concepts to know although it is not a requirement. So i decided to learn and explain these concepts one by one.
#10. setTimeout, setInterval and requestAnimationFrame
setTimeout
The setTimeout method sets a timer which execute a function once the timer expires.
setTimeout(() => console.log(‘hi’), 1000);When we execute this function hi is logged on the console after 1000 millisecond.
Or ‘hi’ can be passed into third parameter
setTimeout((x) => console.log(x), 1000, ‘hi’);setTimeout(console.log, 1000, 'hi');// both are exactly same
setTimout method returns timeoutID and we can use it when we want to cancle that.
const num = 2;
const timeoutID = setTimeout((x) => console.log(x), 1000, 'hi');if (num < 10) {
clearTimeout(timeoutID);
}
For example, if we want to cancle timeout method in specific condition, call clearTimout method with timeoutID , then nothing will be logged on the console.
setInterval
The setInterval method executes a function after every amount of time.
setInterval(() => console.log(‘hi’), 1000);By example above, hi is logged on the console every 1000 millisecond.
setInterval((x) => console.log(x), 1000, ‘hi’);setInterval(console.log, 1000, 'hi');
Like setTimeout method, third parameter is passed to callback function.
const id = setInterval((x) => console.log(x), 1000, ‘hi’);console.log(id);
setInterval method also returns id and we can use it to clear setInterval method by using clearInterval method.
requestAnimationFrame
The requestAnimationFrame method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.
In a nutshell, browser will automatically invoke the callback function when they are ready to repaint the next animation.
The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation.
This method is really useful when you want to make smooth animation.
We have cute sponge bob and number that represents the current y position of character.
Let’s move sponge bob by using requestAnimationFrame method.
let yPos = 0;
const h1 = document.querySelector(‘h1’);
const img = document.querySelector(‘img’);function paint() {
h1.innerText = yPos;
yPos++; img.style.transform = `translateY(${-yPos}px)`; const id = requestAnimationFrame(paint); if (yPos <= 500) return; cancelAnimationFrame(id);}paint();
requestAnimationFrame asks us only one parameter — callback function that we want to execute before repaint.
Invoke paintfunction only once, then requestAnimationFrame will reinvoke paint function before repaint. As requestAnimationFram also returns id, we can cancel it when yPos is bigger than 500.
You can check that sponge bob is moving smoothly
Conclusion
I was familiar with setTimeout and setInterval. But, honestly, i didn’t know requestAnimationFrame. Maybe this will be not useful since i don’t use lots of animation, but this was really interesting.
Hope you learn something from this post. Thanks
