CODEWITHSUNDEEP
javascript
alireza
alireza

Reputation: 557

Javascript Add delay every 5th time in for loop

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.

Upvotes: 0

Views: 207

Answers (5)

Sidd
Sidd

Reputation: 1397

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);
});

Upvotes: 0

Guffa
Guffa

Reputation: 700362

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);
  }
}

Upvotes: 1

Richard3
Richard3

Reputation: 149

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()) {
       }
   }

Upvotes: 0

Cristian Lupascu
Cristian Lupascu

Reputation: 40536

Similar to T.J. 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.

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074365

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>

Upvotes: 4

Related Questions