Web DevelopmentjQuery And Javascript Tutorials

Delay JavaScript loops and continue loop further without execution timeout

Story Highlights

  • For Loop in JavaScript

In this web development tutorial, we will discuss about Pause or Delay JavaScript loops. We all know that for loop statement keeps on executing until it reach final result. But for loop mostly crashes when you run a very long loop like from 0 to 1 Million. Here we will discuss how to run very long for loop without any crash. First we will discuss about basic syntax of for loop in JavaScript.

Pause or Delay JavaScript Loops

Before start using pause and delay javascript loops, we will discuss about basics of for loop in JavaScript and why we need to pause and delay for loop.

Basics of For Loop in JavaScript

//Basic Syntax of For Loop
for(Condition will be here){
    //Execution here until condition become true
}

For loop keep revolving in loop until given condition become true and then stop automatically. Let’s consider a variable n which has value 0 by default. Suppose a condition for loop that is until value of n reach up to 10 loop will keep revolving. Now the syntax for the condition will be as shown below

<script> for(n = 0; n <= 10; n++) { console.log(n); } </script>

In above condition, for loop will keep revolving in loop until value of n become equal or less then 10. When you run above code you will result as shown below

Pause or Delay JavaScript Loops

For running above just copy and paste code in a file with extension .html and then run it in any browser. Open your console and then you will see results like above.

This is short for loop but what will happen if we run for loop until value of n reaches 1,00,000. Technically loop will not crash but almost browser will stop respond after value of n reach to 1000. This is so because there is time limit for execution of every script, you can increase it but you don’t know when your loop will stop.

Delay JavaScript loops

For loop basically use for keep executing until a condition become true. But for pause and delay loop we can not use for loop basic syntax as discuss above. There is no way to pause or delay for loop but you can use below function to create your own loop


In above code, you can see that I have created a function with name myCustomLoop and a variable i with default value 0. At the end of the function I call same function and pass integer 10 as a parameter. This parameter is the value for how many times you want to run a loop. If 10 is send to function then it keep running for 10 times. Inside function, I have declare a setTimeout function which execute after 1000 ms i.e 1 second. So increasing Timeout will delay function calling.  Inside timeout function value of variable will keep add on from 0 to 1,2,3 until reach parameter value n which is 10 in our case.

Similarly you can use other JavaScript loops for executing with delay time. This will break execution time in small parts instead of executing whole loop in one time.

User Rating: 4.6 ( 1 votes)
Tags
Show More

Anil Mehra

I am Anil Mehra, a passionate, workaholic and a Full Stack Tech Savvy Programmer with true north towards growth. I have worked on 256 live projects in MNC. I am expertise in the field of Programming, Server Management, SEO, Blogging and SMO...

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close