Javascript setTimeout()

In this tutorial, you will learn about the JavaScript setTimeout() method with the assistance of examples.

setTimeout is a native JavaScript function (although it can be used with a library, for example, jQuery, as we’ll see later on), which calls a function or executes a code scrap after a predetermined delay (in milliseconds). This may be valuable if, for instance, you wished to show a popup after a visitor has been browsing your page for a specific measure of time, or you need a brief pause prior to eliminating a hover effect from a component (on the off chance that the user unintentionally moused out).

The setTimeout() technique executes a block of code after the predetermined time. The technique executes the code just a single time.

The ordinarily used syntax of JavaScript setTimeout is:

setTimeout(function, milliseconds);

Its parameters are:

• function – a function containing a block of code
• milliseconds – the time after which the function is executed

The setTimeout() method returns an intervalID, which is a positive integer.

---

Example 1: Display a Text Once After 3 Second

// program to display a text using setTimeout method
function greet() {
    console.log('Hello world');
}

setTimeout(greet, 3000);
console.log('This message is shown first');

Output

This message is shown first
Hello world

In the above program, the setTimeout() technique calls the greet() work after 3000 milliseconds (3 second).

Consequently, the program shows the content Hello world just a single time after 3 seconds.

Note: The setTimeout() technique is useful when you need to execute a block once after some time. For instance, showing a message to a user after the predefined time.

The setTimeout() technique returns the interal id. For instance,

// program to display a text using setTimeout method
function greet() {
    console.log('Hello world');
}

let intervalId = setTimeout(greet, 3000);
console.log('Id: ' + intervalId);   

Output

Id: 3
Hello world

---

Example 2: Display Time Every 3 Second

// program to display time every 3 seconds
function showTime() {

    // return new date and time
    let dateTime= new Date();

    // returns the current local time
    let time = dateTime.toLocaleTimeString();

    console.log(time)

    // display the time after 3 seconds
     setTimeout(showTime, 3000);
}

// calling the function
showTime();

Output

5:45:39 PM
5:45:43 PM
5:45:47 PM
5:45:50 PM
..................

The above program shows the time every 3 seconds.

The setTimeout() technique calls the functions just a single time after the time interval (here 3 seconds).

Notwithstanding, in the above program, since the function is calling itself, the program shows the time every 3 seconds.

This program runs inconclusively (until the memory runs out).

Note: If you need to execute a function on various occasions, it’s smarter to use the setInterval() technique.

---

JavaScript clearTimeout()

As you have found in the above example, the program executes a block of code after the predefined time interval. In the event that you need to stop this function call, you can use the clearTimeout() strategy.

The syntax of clearTimeout() technique is:

clearTimeout(intervalID);

Here, the intervalID is the return value of the setTimeout() method.

---

Example 3: Use clearTimeout() Method

// program to stop the setTimeout() method

let count = 0;

// function creation
function increaseCount(){

    // increasing the count by 1
    count += 1;
    console.log(count)
}

let id = setTimeout(increaseCount, 3000);

// clearTimeout
clearTimeout(id); 
console.log('setTimeout is stopped.');

Output

setTimeout is stopped.

In the above program, the setTimeout() strategy is used to increase the value of count after 3 seconds. Be that as it may, the clearTimeout() technique stops the function call of the setTimeout() strategy. Subsequently, the count value isn’t increased.

Note: You by and large use the clearTimeout() technique when you need to cancel the setTimeout() strategy call before it occurs.

---

You can likewise pass extra arguments to the setTimeout() technique. The syntax is:

setTimeout(function, milliseconds, parameter1, ....paramenterN);

At the point when you pass extra parameters to the setTimeout() strategy, these parameters (parameter1, parameter2, and so on) will be passed to the predefined function.

For instance,

// program to display a name
function greet(name, lastName) {
    console.log('Hello' + ' ' + name + ' ' + lastName);
}

// passing argument to setTimeout
setTimeout(greet, 1000, 'Salman', 'Khan');

Output

Hello Salman Khan

In the above program, two parameters Salman and Khan are passed to the setTimeout() strategy. These two parameters are the arguments that will be passed to the function (here, greet() function) that is characterized inside the setTimeout() method.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JavaScript Asynchronous