Add delay after each iteration of a for loop

Question

First I want to say that I've read several answers regarding this issues like:

Delay each iteration of loop by a certain time

and some others but I just can't figure it out how exactly this works.

So after some experiments I end up with those two functions:

function searchForPathWithDelay() {
    var isPathFound = false;
    for (var i = 0; i < cells.length; i = i + 1) {
        if (isThisTheGoalNode(cells[i].axisX, cells[i].axisY)) {
            //the below should be in own method
            var selectedNode = document.querySelector('[data-cellNumber="' + cells[i].id + '"]');
            selectedNode.style.backgroundColor = 'red';
            break;
        }
        setTimeout(searchForPath(cells[i].axisX, cells[i].axisY, cells[i].id), 500);
    }
}

and then:

function searchForPath(axisX, axisY, id) {
    if (isCellInBoundries(axisX, axisY)) {
        var selectedNode = document.querySelector('[data-cellNumber="' + id + '"]');
        selectedNode.style.backgroundColor = 'green';
    }
}

Since it's just a fun thing that I'm doing but the code is a lot I'm posting what I think is relevant to this question. There is no particular reason to have two methods since all the logic can be implemented in just one. The separation was part of my attempts to add the delay I want.

Currently the logic itself is plain simple - cells is an array of objects, and each object provides a way to select a unique DOM elemten by using this:

document.querySelector('[data-cellNumber="' + id + '"]');

I'm not sure that it's becoming clear from the code I've pasted but the simple idea is that every time I select a cell and ultimately change it's background color I want to add some sort of delay so you can see the sequence in which the cells are painted.

If you don't wanna implement 2 different functions, you could use recursion — Jay Ghosh, Sep 21 '16 at 12:31
Instead of `for`, pass iteration value as argument and call recursively. — Rajesh, Sep 21 '16 at 12:35
@JayGosh In fact I would like to implement it with 2 functions as recursion does not comes naturally to me. But I've tried several things I yet I can not get the delay I desire. There was some examples using IIFE, I tried like that too... I don't know I'm missing something but can't see what. — Leron_says_get_back_Monica, Sep 21 '16 at 12:35

score 0 · Answer 1 · answered Sep 21 '16 at 12:35

0

If you simply want to add delay for each iteration of loop, just change this line

setTimeout(searchForPath(cells[i].axisX, cells[i].axisY, cells[i].id), 500);

to

setTimeout(searchForPath(cells[i].axisX, cells[i].axisY, cells[i].id), 500 * (i+1));

This will ensure that setTimeout is invoke with incremental delays in each iteration.

answered Sep 21 '16 at 12:35

gurvinder372

61,170
7
61
75

I've tried this but still it's done wihtout visible delay (instantly) – Leron_says_get_back_Monica Sep 21 '16 at 12:38

score 0 · Answer 2 · answered Sep 21 '16 at 12:37

May be write a function like this?

function loopWithDelay(array, callback, delay, counter){
   if(counter === undefined){
       counter = 0;
   }
   var element = array[counter];
   callback(element, counter);
   counter = counter + 1;
   if(counter < array.length){
      setTimeout(function(){
         loopWithDelay(array, callback, delay, counter);
      }, delay);
   }
}

And then call it like this:

loopWithDelay(cells, cb, 500);

where cb is your code that takes in the array element and index as arguments;

I have not tested it, but you get the idea.

Add delay after each iteration of a for loop

2 Answers2