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

0 0 3 minutes read

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:

Javascript

<script>
    const greetFunc = () => {
      console.log('Hello from GFG');
    };
     
    //Greet after 5000 milliseconds
    setTimeout(greetFunc, 5000);
</script>

Output:

Hello from GFG

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

Javascript

<script>
    const greetFunc = (name, company) => {
      console.log(`Hi ${name}, welcome to ${company}!`);
    };
     
    setTimeout(greetFunc, 5000, 'Anom', 'GeeksForGeeks');
</script>

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:

Javascript

<script>
    setTimeout(() => {
      console.log('Logging from 0ms wait timeout');
    }, 0);
     
    console.log('First');
     
    const randomFunction = () => {
      console.log('Some random function');
    };
     
    randomFunction();
</script>

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.

Javascript

<script>
    const print = () => {
        for (var i = 0; i < 4; i++){
            setTimeout(() => {
                console.log(i);
            }, i*1000);
        }
    }
     
    print();
</script>

Output:

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.zambiatek.com/closure-in-javascript/

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

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:

Javascript

<script>
    const greetFunc = setTimeout(() => {
      console.log(`Hello from GeeksForGeeks`);
    }, 5000);
     
    clearTimeout(greetFunc);
</script>

Output:

//No output in console

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!