setInterval() method in javascript(react)

The setInterval() function in JavaScript is used to execute operations at a specific interval of time. This method is commonly employed in time management applications and other applications that require periodic updates.

What is setInterval() ?

let’s assume you have a function that you want to run repeatedly every second, you can use the `setInterval()` function in JavaScript.

To use `setInterval()`, you need to provide two things: the function you want to run, and the time interval (in milliseconds) at which you want it to run.

For example, if you want your function to run every second, you would set the interval to 1000 milliseconds (since there are 1000 milliseconds in one second).

Once you’ve set up the `setInterval()` function with your desired time interval and function, it will continue to run that function at the specified interval until you stop it using the `clearInterval() function.

Syntax :-

setInterval(//code you want to perform, interval );

How setInterval() is used ?

Imagine that you’re playing a game where you have to jump over a hurdle every few seconds. It’s easy to do it once or twice, but doing it repeatedly can get tiring. Instead, you could use a timer that automatically makes you jump over the hurdle every few seconds.

This is similar to how the setInterval() method works in JavaScript. It’s a built-in method that allows you to execute a function repeatedly at a specified interval. The interval is measured in milliseconds, so you can specify how often you want the function to be called.

In this example, we’ve defined a function called jumpOverHurdle() that logs “Jump!” to the console. We then use setInterval() to call this function every 3000 milliseconds (i.e., every 3 seconds).

So, just like how you could use a timer to make you jump over a hurdle every few seconds, the setInterval() method in JavaScript can execute a function repeatedly at a specified interval.

Here’s the example:

function jumpOverHurdle() {
  console.log("Jump!");
}

setInterval(jumpOverHurdle, 3000);

You can practice using the setInterval() method by creating a timer app. To learn how to create a timer app using JavaScript, you can refer to our blog post on the topic – https://dev.sochokuchnaya.com/blog/react-js/make-stopwatch-timer/.

Stop setInterval() with clearInterval()

When you use `setInterval()`, it will keep running until `clearInterval()` is called.

Syntax :-

clearinterval(intervalID);

How it is used ?

let’s understand with above(`jumpOverHurdle`) example,

function jumpOverHurdle() {
  console.log("Jump!");
}

let intervalID = setInterval(jumpOverHurdle, 3000); // Start the interval and store the ID

// Stop the interval after 10 seconds (10000 milliseconds)
setTimeout(function() {
  clearInterval(intervalID); // Stop the interval using the ID
}, 10000);

The code defines a function named `jumpOverHurdle()` that logs the message “Jump!” to the console.

Then, the `setInterval()` method is called with two arguments: the `jumpOverHurdle` function and an interval value of 3000 milliseconds (3 seconds). This starts an interval timer that executes the jumpOverHurdle() function every 3 seconds.

However, if you want to stop the interval after a certain amount of time, you can use the `clearInterval()` function. This function takes in the ID value of the interval timer that was returned by `setInterval()` when it was started. You can then use this ID value later to stop the interval.

So, the next part of the code creates a new variable named `intervalID` and assigns it the value returned by `setInterval()`. This ID value is unique to the interval that was started and is needed to stop the interval later using `clearInterval()`.

After that, the `setTimeout()` method is called with two arguments: a function and a delay time of 10000 milliseconds (10 seconds). This sets up a timeout that will wait for 10 seconds before executing the function provided.

Inside the function provided to `setTimeout()`, `clearInterval()` is called with the intervalID variable as an argument. This stops the interval timer that was started earlier by passing in its ID value.

Overall, this code sets up an interval timer that executes `jumpOverHurdle()` function every 3 seconds, and then stops the interval after 10 seconds using `clearInterval()`.