How to understand various snippets of setTimeout() function in JavaScript ?

When dealing with JavaScript, there will be times when you wish to run a function after a particular period of time. For this, we use setTimeout(), an asynchronous method that sets a timer, which then executes the function or specified piece of code once the timer expires. In this article, we will be exploring several code snippets on how setTimeout is used. 

Syntax:

setTimeout(() => {
   // Your function which will execute after  
   // 5000 milliseconds
}, 5000);

We see the number 5000 refers to the milliseconds it will wait to execute the function. Inside the setTimeout() method, we declared a callback function that will execute after 5000 milliseconds.

Example 1: We can also pass our function in the following way:

Output:

Hello from GFG

Example 2: Suppose our function takes parameters, then we can write the syntax in the following way:

Output:

Hi Anom, welcome to GeeksForGeeks!

We can see that the function props are passed after the timeout parameter.

Example 3: Now a question arises, what if we set the timer to 0 milliseconds? Let’s find out:

Output:

First
Some random function
Logging from 0ms wait timeout

Explanation: We can see that even if the setTimeout() is declared earlier in the code with 0ms wait time, it will still execute at the end. This is because, despite having a delay of zero, setTimeout is queued and scheduled to run at the next available opportunity, not immediately. Because currently-running code must complete before queued functions are invoked.

Example 4: Let’s see, what will happen if we use setTimeout inside a loop: In the below function we are trying to console log a variable i after i milliseconds.

Output:

4
4
4
4

Explanation: If we execute the above code, we will expect it to print 0 1 2 3. But it will print 4 4 4 4, because each time the loop is run, it stores a reference to the same i variable in the memory space. To overcome this issue, if we change the variable type ‘var‘ to ‘let‘ which is a block scope, it will create a completely new copy of i at every loop iteration in the memory space. Thus the callback function inside the setTimeout forms a closure with the i variable at every iteration. To know more about closures follow this article: https://www.geeksforgeeks.org/closure-in-javascript/

Output after changing variable type ‘var’ to ‘let’ :

0
1
2
3

Example 5: But there may come sometime when we want to cancel a timeout that we had already planned. To deal with this we have a clearTimeout() method in JavaScript. Let’s see how we can use it:

Output:

//No output in console

No output is shown because we have canceled the setTimeout using clearTimeout()