JavaScript Timing Events
JavaScript timing events are a set of functions that allow you to execute a piece of code at a specified time or repeatedly at a specified interval.
There are three main timing events in JavaScript:
The setTimeout()
The setTimeout()
function is used to execute a piece of code once after a specified delay (in milliseconds). The delay is specified as the second argument to the function.
As an example:
setTimeout(function () {
alert("Hello World!");
}, 3000); // displays "Hello World!" after 3 seconds
In this example:
- This example sets a timeout of 3 seconds (3000 milliseconds) using the
setTimeout()
function. - After 3 seconds, the function passed as the first argument to
setTimeout()
will be executed. - In this case, the function simply displays an alert box with the message
"Hello World!"
.
The clearTimeout()
clearTimeout()
is a method in JavaScript that cancels a timeout previously set with setTimeout()
.
Here's an example that demonstrates the use of clearTimeout()
:
let timeoutID = setTimeout(function() {
console.log("This message should not be displayed");
}, 5000);
// Cancel the timeout
clearTimeout(timeoutID);
console.log("Timeout has been cleared");
In this example:
- We set a timeout to display a message after 5 seconds using
setTimeout()
. - We then immediately cancel the timeout using
clearTimeout()
. - As a result, the message is never displayed, and the console logs the message
"Timeout has been cleared"
immediately.
The setInterval()
The setInterval()
function is used to execute a piece of code repeatedly at a specified interval (in milliseconds). The interval is specified as the second argument to the function.
As an example:
let count = 0;
let intervalID = setInterval(function () {
count++;
console.log(count);
}, 1000); // displays the count every second
// To stop the interval after 5 seconds
setTimeout(function () {
clearInterval(intervalID);
}, 5000);
In this example:
- This example uses the
setInterval()
function to execute a function repeatedly at an interval of 1 second (1000 milliseconds). - The function increments a counter and logs its value to the console.
- The
setInterval()
function returns an ID that can be used to stop the interval using theclearInterval()
function. - The interval is stopped after 5 seconds using
setTimeout()
andclearInterval()
.
The clearInterval()
clearInterval()
is a method in JavaScript that cancels an interval previously set with setInterval()
.
Here's an example that demonstrates the use of clearInterval()
:
let count = 0;
let intervalID = setInterval(function() {
count++;
console.log(count);
}, 1000);
// Cancel the interval after 5 seconds
setTimeout(function() {
clearInterval(intervalID);
}, 5000);
In this example:
- We use
setInterval()
to execute a function that increments a counter and logs its value to the console every second. - We also store the interval ID returned by
setInterval()
in a variable calledintervalID
. - We then use
setTimeout()
to cancel the interval after 5 seconds by passingclearInterval()
theintervalID
we stored earlier. - As a result, the function will no longer be executed every second, and the console output will stop after 5 seconds.
The requestAnimationFrame()
The requestAnimationFrame()
function is used to execute a piece of code at the next available opportunity for rendering, typically at 60 frames per second. This function is commonly used for animation and other graphical effects.
As an example:
function animate() {
// update the animation
requestAnimationFrame(animate);
}
// start the animation
requestAnimationFrame(animate);
In this example:
- This example demonstrates the use of the
requestAnimationFrame()
function to create an animation loop. - The
animate()
function is called recursively usingrequestAnimationFrame()
, which schedules the function to run before the next repaint of the page. - This creates a smooth animation that is synchronized with the refresh rate of the display.
t's important to use them judiciously to avoid excessive CPU usage and to ensure a smooth user experience.