How to Delay a JavaScript Function Call using JavaScript ?

Delaying the execution of a JavaScript function is a powerful technique often achieved using methods like setTimeout(). This approach is commonly used in over 60% of modern web applications to manage animations, control user interactions, or handle asynchronous behavior smoothly. Whether it's for debouncing a search input, adding delay to UI transitions, or executing a function after a condition is met, delaying function calls ensures better performance and an enhanced user experience.

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 1: 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("Geeks for Geeks statement will be executed in 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 2: 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 3: 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 4: 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