How to Delay a JavaScript Function Call using JavaScript ?

Delaying a JavaScript function call involves postponing its execution for a specified time using methods like setTimeout(). This technique is useful for timed actions, animations, or asynchronous tasks, enabling smoother user experiences and better control over when certain operations run.

There are several ways to delay the execution of a function. This can be useful for various purposes, such as creating animations, implementing debounce in search inputs, or simply delaying an action until a certain condition is met.

Using setTimeout() Method

The setTimeout() method delays a function's execution by a specified time in milliseconds. It takes a callback function and a delay value, running the function once after the delay elapses.

Example: This example shows the use of the setTimeout() method to delay the function call in JavaScript. In this example, myGeeks() function will be executed after a delay of 3 seconds (3000 milliseconds).

function myGeeks() {
    console.log("Function executed after 3 seconds");
}

setTimeout(myGeeks, 3000);

Output

Function executed after 3 seconds

Using Promises and async/await

Using Promises and async/await, you can delay a function by creating a Promise that resolves after a set time with setTimeout(). Use await to pause execution until the delay completes.

Example: In this example, the delay function returns a Promise that resolves after a specified number of milliseconds. The myGeeks uses await to pause its execution until the delay is completed.

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function myGeeks() {
    console.log("Waiting 2 seconds...");
    await delay(2000);
    console.log("Function executed after 2 seconds");
}

myGeeks();

Output

Waiting 2 seconds...
VM141:8 Function executed after 2 seconds

Using setInterval() for Repeated Delays

The setInterval() method repeatedly executes a function at specified intervals in milliseconds until cleared. Unlike setTimeout(), it runs continuously at set intervals, ideal for tasks requiring consistent updates, like animations or periodic data fetching.

Example: In this example, mtGeeks will be executed every 1 second (1000 milliseconds).

function myGeeks() {
    console.log("Function executed every 1 second");
}

setInterval(myGeeks, 1000);

Output

Function executed every 1 second
Function executed every 1 second
. . .

Canceling a Delay

To cancel a delayed function call set by setTimeout(), use the clearTimeout() method. Pass the identifier returned by setTimeout() to stop the scheduled function from executing, effectively canceling the delay.

Example: In this example, the execution of the function passed to setTimeout() is canceled before it has a chance to execute.

let timeoutId = setTimeout(() => {
    console.log("This will not be executed");
}, 3000);

clearTimeout(timeoutId);

Output

Function executed every 1 second