A Beginner's Guide to setInterval, setTimeout, and clearInterval in JavaScript

Are you new to JavaScript and wondering how to make your code run smoothly without bogging down your computer's resources? One of the key tools in any JavaScript developer's arsenal is the ability to schedule tasks at a certain time interval or after a certain delay. In this article, we'll explore three related functions in JavaScript that allow you to do just that: setInterval, setTimeout, and clearInterval.

What is setInterval?

The setInterval function is used to repeatedly execute a piece of code at a set time interval. The syntax for setInterval is as follows:

setInterval(function, delay)

The first parameter is the function you want to execute, and the second parameter is the delay between each execution. For example, if you wanted to execute a function every 5 seconds, you would use the following code:

setInterval(function() {
  console.log("Hello, world!");
}, 5000);

This will log "Hello, world!" to the console every 5 seconds. You can use setInterval to execute any function, including ones you define yourself.That being said let's proceed to our second method.

What is setTimeout?

The setTimeout function is similar to setInterval, but it executes a function once after a certain delay. The syntax for setTimeout is as follows:

setTimeout(function, delay)

The first parameter is the function you want to execute, and the second parameter is the delay before execution. For example, if you wanted to execute a function after a 2-second delay, you would use the following code:

setTimeout(function() {
  console.log("Hello, world!");
}, 2000);

This will log "Hello, world!" to the console once after a 2-second delay. You can use setTimeout to delay the execution of any function. Last but not least we have clearInterval.

What is clearInterval?

The clearInterval function is used to stop the execution of a function scheduled with setInterval. This is important to prevent memory leaks and ensure that your code runs smoothly. The syntax for clearInterval is as follows:

clearInterval(intervalID)

The parameter is the ID of the interval you want to stop. You can get this ID by storing the return value of setInterval in a variable. For example, if you wanted to stop the interval we defined earlier that logs "Hello, world!" every 5 seconds, you would use the following code:

var intervalID = setInterval(function() {
  console.log("Hello, world!");
}, 5000);

clearInterval(intervalID);

This will stop the execution of the function after the first interval.

In our next article, we will discuss about common mistakes that beginner programmers make while using this method.