Run Function Multiple Times With setTimeout Method of JavaScript.

In this blog post you’ll learn how to run a function again and again without the setInterval method and for loop. By using the setTimeout method in JavaScript.

Run Function Again and Again With setTimeout Method.

1. First we call the function, so that it can be executed on a page load.
2. After calling it, let's create it. In this function we add the code that we want to run again and again.
3. In that function, First we clear the timeout with clearTimeout method (to make sure that previous timeout is cleared before starting the new one), then increment the i variable value by 1. And make it print in the console with text "maketechstuff.com".
4. Along with this we'll add a setTimeout method with a timer (timer as an interval). Inside the setTimeout we call the function again.

So what's going to happen is, when the page loads the function will be executed (As initially we called the function).When function is executes, The previous setTimeout will be cleared, the i variable value increment by 1.

In the console, i variable and text “maketechstuff.com” will be printed. 

Then the setTimeout method calls the function again after a given timeout (half second). 

This will make a loop. Whenever this function calls the setTimeout method run and this function calls again.

JavaScript

    // To know that how many times a function is executed by incrementing it inside the function. By knowing this value we can stop, run, repeat the function.
    let i = 0;

    // To store the setTimeout Method. Use to clear the timeout when no needed.
    let my_timeout;

    // calling the function initially when page loads.
    maketechstuff();
    function maketechstuff() {
        clearTimeout(my_timeout);

        // Incrementing the value by 1.
        i++;

        // Print the i value and text "maketechstuff.com" in console.
        console.log(i, "maketechstuff.com")

        // calling the function after half second.
        my_timeout = setTimeout(() => {
            maketechstuff();
        }, 500);

    }
  

Now to stop the loop or stop the function being executed. We just need to add a condition and if the condition is true, then we clear the timeout.

Stop the function from being executed.

For example, I want to run the function just 10 times. So when the i variable value is equal to 10 then we clear the Timeout with the clearTimeout method. See below code.

JavaScript

    // To know that how many times a function is executed by incrementing it inside the function. By knowing this value we can stop, run, repeat the function.
    let i = 0;

    // To store the setTimeout Method. Use to clear the timeout when no needed.
    let my_timeout;

    // calling the function initially when page loads.
    maketechstuff();
    function maketechstuff() {
        clearTimeout(my_timeout);

        // Incrementing the value by 1.
        i++;

        // Print the i value and text "maketechstuff.com" in console.
        console.log(i, "maketechstuff.com")

        // calling the function after half second.
        my_timeout = setTimeout(() => {
            maketechstuff();
        }, 500);

        // Stop the timeout method when the i variable value reaches 10. By stoping the timeout method the function also stop from being executed.
        if(i === 10){
            clearTimeout(my_timeout);
            i = 0;
        }
    }
  

So that's how you can run a function again and again without for loop and setInterval. If you have any query or suggestion. Feel free to write them in the comment section.