Setting count on set interval

Question

I am working on the following code. Why is the interval happening only one time instead of 3, as expected on let x= 3?

Basically I need to repeat this loop/interval for 3 times but it is happening only once.

$(function() {
  let colors = ['red', 'blue', 'green']

  let x = 3;
  let interval = 6000;

  for (let i = 0; i < x; i++) {
    setTimeout(function() {
      $('body').css('background-color', colors[i]);
      backtoWhite();

    }, i * interval)
  }

  function backtoWhite() {
    setTimeout(function() {
      $('body').css('background-color', 'white');
    }, 3000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

All three start at the „same“ time. This is why you only see one change — caramba, Aug 24 '18 at 21:48
When the timeout callback executes... Like 0 to 12 seconds after (depending on the timeout), `i` equals 3 for all of them. That's why. — Louys Patrice Bessette, Aug 24 '18 at 21:50
This is like example #6 in [this answer](https://stackoverflow.com/a/111111/2159528) — Louys Patrice Bessette, Aug 24 '18 at 21:53
Can you guys let me know how to add delay here? I thought the `let interval = 6000;` is taking care of this — Mona Coder, Aug 24 '18 at 21:53
Possible duplicate of [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — Louys Patrice Bessette, Aug 24 '18 at 21:53
This seems to be running 3 times. Your delays are 0, 6000 and 1200 ms. I see a red background for 3000 ms, a white background for 3000 ms, then blue, then green. What's the expected behavior? — ggorlen, Aug 24 '18 at 21:57
Your title and question both mention `setInterval()`, but the code uses `setTimeout()`. Which are you really asking about? — Barmar, Aug 24 '18 at 22:10

Unmitigated · Answer 1 · 2018-08-24T23:31:26.157

You can use setInterval to execute a function continuously whereas a setTimeout executes a function once after a specified delay (in milliseconds).

The documentation for setInterval states that:

The setInterval() method of the WindowOrWorkerGlobalScope mixin repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().

The documentation for setTimeout states that:

The setTimeout() method of the WindowOrWorkerGlobalScope mixin (and successor to window.setTimeout) sets a timer which executes a function or specified piece of code once after the timer expires.

$(function() {
  let colors = ['red', 'blue', 'green']

  let x = 0;
  let interval = 6000;
  
  var intvl = setInterval(function(){
      $('body').css('background-color', colors[x]);
      setTimeout(function(){
      backtoWhite();
      }, interval/2);
      x++;
      if(x>=3){
        clearInterval(intvl);
      }
    }, interval);

  function backtoWhite() {
      $('body').css('background-color', 'white');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 2 · answered Aug 24 '18 at 21:58

Based on your code structure, you can achieve what you want this way:

$(function() {
  let colors = ['red', 'blue', 'green']

  const nbColors = colors.length;
  let repetition = 3;
  let interval = 6000;

  for (let loop = 0 ; loop < repetition ; loop++) {
      for (let i = 0; i < nbColors; i++) {
        setTimeout(function() {
          $('body').css('background-color', colors[i]);
          backtoWhite();

        }, (i + loop * nbColors) * interval)
      }
  }

  function backtoWhite() {
    setTimeout(function() {
      $('body').css('background-color', 'white');
    }, interval / 2);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

But this is missing the great potential of functional programming. You should consider using callbacks to trigger the next color change once the current has finished instead of triggering all at once with different delay in execution.

score 0 · Answer 3 · answered Aug 24 '18 at 22:08

Using one interval, the color change, cycling the color array can be done like this.
There is a white color applied in between each color change.

$(function() {
  let colors = ['red', 'blue', 'green']
  let index = 0;
  let whiteInBetween = false;  // A "flag" to toggle at each iteration to determine if to apply white instead of color.

  setInterval(function() {
    if(whiteInBetween){
      $('body').css('background-color', "white");
    }else{
      $('body').css('background-color', colors[index]);
      index++
    }
    whiteInBetween = !whiteInBetween;  // "Flag" toggling
    index = index%colors.length;  // Keeping the color index in range, using the remainder of the index divided by the color array length
    
  },1000);  // Interval setted faster for this demo...  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>

score 0 · Answer 4 · answered Aug 25 '18 at 00:29

Your for loop is executing way faster than your timeout, so you're probably only seeing the first or last iteration. When dealing with timing, I'd recommend less variables and more recursion or callbacks.

Also, I'm assuming you want the time for each color to be constant, since red has an index of 0 and i * interval would mean you never see red.

let colors = ['red','white','blue','white','green','white'];

function SetBackgroundColor(colorIndex) {
    colorIndex = colorIndex >= colors.length - 1 ? 0 : ++colorIndex; //constrain index  
    
    $('body').css({'background-color': colors[colorIndex]}); //set color
    
    setTimeout(
      function() { SetBackgroundColor(colorIndex); }, //recursion
      colors[colorIndex] === 'white' ? 3000 : 6000); //select timeout
}

SetBackgroundColor(-1); //initialize

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

Setting count on set interval

4 Answers4