Javascript Add delay every 5th time in for loop

Question

I have an array and I'm using a for loop to go through it like this:

var test=['1','2','3','4','5','6','7','8','9','10','11','12','13'];
for(var i=0; i<test.length;i++){
  console.log(test[i]);
}

Now I want to know how to set a delay (5 seconds) every 5th item in array looped and then continue through the rest of the array.

Answer 1

You can't actually delay code in JavaScript (well, not reasonably), but you can schedule it to run later and then let the current task complete. On browsers and in some non-browser environments, that's done with setTimeout or setInterval .

In your case, setTimeout would probably make the most sense:

var test=['1','2','3','4','5','6','7','8','9','10','11','12','13'];
var i =0;
loop();
function loop() {
    var max = Math.min(i + 5, test.length);
    var j;
    for (j = i; j < max; ++j, ++i) {
        console.log(test[j]);
    }

    if (j < test.length) {
        setTimeout(loop, 5000); // 5000ms = 5 second
    }
}

Live Example: (using a shorter delay)

 var test = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13']; var i = 0; loop(); function loop() { var max = Math.min(i + 5, test.length); var j; for (j = i; j < max; ++j, ++i) { snippet.log(test[j]); } if (j < test.length) { setTimeout(loop, 1000); // 1000ms = 1 second } } 

 <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

Answer 2

Similar to TJ Crowder's answer , but using splice to do the array math:

var test=['1','2','3','4','5','6','7','8','9','10','11','12','13'];

function processBatchesOfFive() {
  var fiveItemBatch = test.splice(0, 5);

  // process the batch here
  console.log('Now processing: ' + fiveItemBatch);

  if(test.length){
    setTimeout(processBatchesOfFive, 1000); // modify delay here
  }
}

Here it is in action: http://jsbin.com/nuneyu/1/edit?js,console

Note: this version mutates the test array, so you might want to make a copy of it first.

Answer 3

You can't pause a loop in Javascript (in any useful manner). Divide the work into showing five items at a time, and use setTimeout to start the next part after a delay:

 var test = ['1','2','3','4','5','6','7','8','9','10','11','12','13']; var index = 0; showItems(); function showItems() { for (var i = 0; i < 5 && index < test.length; i++, index++){ console.log(test[index]); } if (index < test.length) { window.setTimeout(showItems, 5000); } } 

Answer 4

Write a function to sleep, and then call it. Every 5th element should be a (multiple of 5 -1) as i starts from 0.

var test=['1','2','3','4','5','6','7','8','9','10','11','12','13'];
  for(var i=0; i<test.length;i++){
   if((i+1)%5 == 0)
     sleep(5000);
   console.log(test[i]);
  }

function sleep(miliseconds) {
       var currentTime = new Date().getTime();
       while (currentTime + miliseconds >= new Date().getTime()) {
       }
   }

Answer 5

Bin: http://jsbin.com/yuheziwozi/1/edit?js,console

var test=['1','2','3','4','5','6','7','8','9','10','11','12','13'];
test.forEach(function(num,index){
    setTimeout(function(){
        console.log(num);
    },(parseInt(index/5))*5000);
});