The difference between setTimeout() and setInterval() in JavaScript.

In this article, you will learn when you should use setTimeout() and when to use setInterval().

setTimeout()

setTimeout() is used when you only need to call a function once after a specified amount of time.

For example, if you want to make a popup appear after the user is on the site for 5 seconds you can use setTimeout().

A quick example would be:

function popupOpen(){
    //Function to make a popup appear
}

//The setTimeout will run the popupOpen function after 5 seconds.
setTimeout(popupOpen, 5000)

The majority of the time the setTimeout() function takes 2 parameters (but there are optional parameters).

The first parameter is the function to run. The second parameter is time in milliseconds that need to pass before the function is executed (5 seconds = 5000 ms).

If you ever need to prevent the function from executing, you can use clearTimeout(). For example, if the user clicks a button on the site before the 5 seconds, you might not need the popup anymore, in which case you can clear the setTimeout(). See my example below:

let btn = document.getElementById("btn");

function popupOpen(){
    //Function to make a popup appear
}

//The setTimeout will run the popupOpen function after 5 seconds.
//We are saving it in a variable, in case we need to clear it.
let timeout = setTimeout(popupOpen, 5000);

//If the button is clicked, then we don't need the setTimeout to run the popupOpen function anymore.
btn.addEventListener("click", function(){
    clearTimeout(timeout);
})

setInterval()

setInterval() is used when to want to keep executing a function every time a specified number of seconds pass.

For example, you might want to call an API call every 3 seconds to get new data. In this case setTimeout is a perfect use-case.

A quick example would be:

function callApi(){
    // return result from API result
}

setInterval(callApi, 3000);

As you can see, it is almost the same format as setTimeout except in setIntervall the function is called every 3 seconds while in setTimeout it would only be called once.

The majority of the time the setInterval() function takes 2 parameters (but there are optional parameters).

The first parameter is the function that will keep getting executed. The second parameter is time in milliseconds that need to pass before the function is executed again (3 seconds = 3000 ms).

If you ever need to prevent the function from executing, you can use clearInterval(). For example, if you need to call the API call every 3 seconds until you see a result you need then you can stop it from running anymore.

See my example below:

function callApi(){

    //If the API call returns a result you need then 
    //you can stop the interval from running again.
    if(result){
        clearInterval(interval);
    }

    // return result from API result.

}

let interval = setInterval(callApi, 3000);

I hope you now know when and how to use the setInterval() and setTimeout() functions in Javascript.

To summarize, use setTimeout() when you only need to call a function once after a specified amount of time. If you need to clear the timer and prevent it from running, clear it with clearTimeout().

Use setInterval() when you need to execute a function every x seconds. To clear the interval and stop it from running anymore, clear it with clearInterval().