setTimeOut within for loop

Question

I'm confused about how to use the setTimeout function within a for loop. What I'm trying to do is highlight divs one at a time based on an array. Here's my code:

for (i = 0; i < strArray.length; i++) {
  doSetTimeout(i, colors, strArray);
}

and then the function, doSetTimeout:

function doSetTimeout(i, colors, strArray) {
  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");
  }, 1000);
}

Based on this thread, I thought having a separate function to do the color changing would solve the problem, but I'm still having an issue where all of the divs flash at the same time. Anyone know what the issue might be? And is there another, preferable way to do this?

Because you did not change the duration... `}, 1000 * i);` will do... — Rayon, Aug 25 '16 at 17:48
@Rayon, changing the duration alone does not prevent that the first fill statement is executed at the same time for all elements. — trincot, Aug 25 '16 at 17:55
Note that the "+1" inside the color array index is a bug. Indices start at 0 and go to length-1. You should better round the random*length. — Hubert Grzeskowiak, Aug 25 '16 at 18:30
Did any of the answers suit your needs? Could you accept one or leave a comment? — trincot, Sep 13 '16 at 17:51

trincot · Answer 1 · 2016-08-25T19:25:36.423

You could do it like this:

(function doSetTimeout(i, colors, strArray) {
  if (i >= strArray.length) return; // nothing more to do
  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");
    // call the function recursively
    doSetTimeout(i+1, colors, strArray);
  }, 1000);
})(0, colors, strArray); // Execute immediately for index 0

This creates a function and executes it immediately for the first element in the array.

All other calls are only done when the previous timeout event has been triggered, which will ensure a sequential processing.

The whole thing ends when all elements have been processed, since in the last call to doSetTimeout no new timeout is scheduled.

Vahan · Answer 2 · 2016-08-25T19:03:23.417

0

Why not to use setInterval instead?

    var i = 0;        
    var intervalID = setInterval(function() {

        if (i < strArray.length) {
             $("use").css("fill", "#333333");
             $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
             clearInterval(intervalID)
        }
        i++;
    }, 1000);

edited Aug 25 '16 at 19:03

answered Aug 25 '16 at 17:54

Vahan

169
3
12

Starting i at 0 and incrementing after the condition reads easier IMHO – Hubert Grzeskowiak Aug 25 '16 at 18:29
True. Fixed it. Thanks – Vahan Aug 25 '16 at 19:03

score 0 · Answer 3 · answered Aug 25 '16 at 17:58

You can do it like this:

function doSetTimeout(i, colors, strArray) {
  if(i >= strArray.length) return;  

  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");

    doSetTimeout(i + 1, colors, strArray);
  }, 1000);
}

doSetTimeout(0, colors, strArray);

setTimeOut within for loop

3 Answers3