How to Delay execution with setTimeout in JavaScript

The Complete Guide to WP Admin and How to Optimize Your Site for Maximum Performance Reading How to Delay execution with setTimeout in JavaScript 3 minutes Next WordPress 6.0 is finally here.

By Bofu Agence MarketingMay 23, 20220 comments

How setTimeout works

Most of us use setTimeout all the time without realizing it.

It's a handy function that helps us control the code execution after a set delay.

The code will run once after the specified delay has passed when using it.

You can specify a delay in milliseconds, which allows you to precisely control how long the code will wait before executing the code inside.

For example, you can use it to queue up multiple tasks and run them all at once after the delay has elapsed.

Passing Parameters to setTimeout

It takes two parameters: the function name and the delay value in milliseconds.

You can also pass the direct callback or an arrow function as the first parameter.

setTimeout example

Let's take a look at an example of how to use it.

Quick Example

Redirect a user to a different page after 5 seconds.

You can redirect a user in JavaScript through window.location.href = "URL"

setTimeout example

clearTimeout – Clear the execution of setTimeout

Clearing the timeout period is useful for a variety of purposes in code.

It can be used for cleaning up code or canceling an action that was already started.

For example, if you set a timer for 10 minutes and want to cancel it early or cancel the timeout based on a specific condition. You can use clearTimeout.

This will stop the timer from executing and return the timer to its initial state.

You can also use clearTimeout to avoid infinite loops and other problems.

clearTimeout example

FAQs

Is there any difference between setTimeout and setInterval?

setTimeout executes the code after a set amount of time, and it only runs once. In contrast, setInterval executes the code multiple times according to the interval set in milliseconds.