How to use setInterval in an slightly irregular pattern such as in a for loop?

Question

The behaviour I want is this: The background color changes to say, gold, and remains that color for say X length of time. Then, background color changes to say, red, and remains that color for say Y length of time. The background color then changes back to gold and remains that color for X length of time. Then the background color changes back to red and stays that way for Y length of time. This whole kit and caboodle executes in a loop-style fashion for Z number of times and then ends.

I've tried putting setInterval'd functions into a for loop (in order to count the number of times we make the change) but have found that all of the functions that have been set to setInterval themselves all start running the interval timers at the same time (not in sequence).

I hope this is clear. Here is a JSFiddle of my efforts: http://jsfiddle.net/6WE6s/3/ I've managed to get the background color to change in a even pattern, but I want the pattern described above and I'm confused as to what to do next.

Thanks in advance for the help! :)

Answer 1

var colors = [
  ['gold', 2000],  // X = 2000 miliseconds
  ['red', 1000]   // Y = 1000
],
repeat = 3, // Z = 3,
index  = 0, // current position in colors array
changeColor = function( ) {

   // if index == colors.length then mod = 0 
   var mod = index % colors.length;

   if(!index || mod || --repeat ) {
     index = mod;
     var data = colors[ index++  ];  // data = [ currentColor, currentColorTimeout ]
     document.body.style.background = data[0];
     setTimeout( changeColor, data[1] ); // and so on
  }
  //if index >0 && index == last 
  //then decrement `repeat` and check if is == 0
  //nothing to do :)

};
changeColor(); // run

This is a simple example. You can make function with arguments(colors,repeats) and its body as above.

Note: setInterval isn't suitable for this purpose because in setInterval you pass timeout once

If repeat initially is 0 will be an infinite number of repetitions

Answer 2

Don't use setInterval(). With setTimeout() you can do something like this:

function changeColors(colors, repeats) {
    var i = 0;
    if (typeof repeats === "undefined")
        repeats = 1;
    function doNext() {
        if (i >= colors.length){
            if (--repeats > 0)
                i = 0;
            else
                return;
        }
        $('body').css('background-color', colors[i].color);
        setTimeout(doNext, colors[i++].delay);
    }
    doNext();
}

changeColors([{color : "gold", delay : 2000},
             {color : "red", delay : 4000}],
             3);

You can add as many colours as you like, each with their own delay, by adding more elements to the array you pass to changeColors(). The function will go through the colours in turn, and do the whole sequence the number of times specified in the repeats parameter.

Demo: http://jsfiddle.net/nnnnnn/6WE6s/10/

Answer 3

Here's my effort - no jQuery required:

function colorCycle(el, count, cols) {
    var i = 0,
        n = cols.length;

    // allow this to work on any element given its ID
    el = (typeof el === "string") ? document.getElementById(el) : el;


    if (n === 0) {
        return;       // no colours?
    } else if (n === 1) {
        count = 1;    // don't trigger any timers if there's only one colour
    }

    // all of the hard work is done here
    (function repeat() {

        var interval = cols[i][1];
        el.style.backgroundColor = cols[i][0];

        // only do the whole cycle "count" times - 0 = forever
        if (++i === n) {
            if (count && !--count) {
                return;
            }
            i = 0;
        }
        setTimeout(repeat, interval);  // call myself
    })();  // IIFE starts the cycle straight away
};

colorCycle(document.body, 5, [
    ['red', 1000],
    ['gold', 500]]);

See http://jsfiddle.net/alnitak/42PeT/

Answer 4

try this

var colors = []; 
colors.push({color:"gold", time:4000}); //4000 X length of time
colors.push({color:"red", time:2000}); //2000 Y length of time

var numberofTimes = 50; //50 Z number of times
var $body;
var times = 0; // counter for tracking
var currentColor = {}; //currentColor info can be used to get the current

$(function(){
    $body = $('body');
    changeBG();
});

function changeBG()
{
    currentColor  =  colors[times % colors.length];
    $body.css('background-color',currentColor.color);
    times++;

    if(times<numberofTimes)
       setTimeout(changeBG, currentColor.time);
}

check this quick DEMO

Answer 5

Abstain from using setInterval. Reference here.

EDIT: I've missed the different delay in calls.

var colors = ["#FF0000", "#00FF00", "#0000FF"];
var times  = [1000, 2000, 3000];
var backgroundColor = "";
var counter = 0;

var changeBackground = function () {

    // if we ran out of colors — do nothing: this simply goes out
    // of the function, without continually calling setTimeout.
    if (counter >= colors.length)
        return;

    // you fetch your new color here and increase the counter
    // The counter keeps count of how many animations you've done.
    backgroundColor = colors[counter];

    // increase the counter to point to the next index of colors
    // array you'll use in a subsequent call
    counter++;

    // do your magic voodoo change background animation here.
    // I'm just doing a console.log() to be sure this works.
    // Your question was framework agnostic, the answer should be too.
    console.log(backgroundColor);

    // setInterval to repeat
    window.setTimeout(changeBackground, times[counter]);
}

window.setTimeout(changeBackground, times[counter]);

Answer 6

A basic example iterating an array of color and time arrays with setTimeout.

(function() {
    var i = 0,
        colorsTimes = [['gold', 'red', 'gold', 'red', 'gold'],
                       [2000, 4000, 2000, 4000, 2000]];

    function switchColors() {
        setTimeout(function() {
            $('body').css('background-color', colorsTimes[0][i]);
            if (++i < colorsTimes[0].length) switchColors();
        }, colorsTimes[1][i]);
    }
    switchColors();
}());

Fiddle

Answer 7

Using setTimeout:

var doCount = (function() {
    var count = 0;
    var interval;
    var limit = 5;  // default

    return function(num) {
      limit = num || limit;

      if (count < limit) {
        count++;
        console.log('running number ' + count);
        interval = setTimeout(arguments.callee, 1000);

      } else {
        interval && clearTimeout(interval);
      }
    }

}())

Using setInterval:

var doCount = (function() {
    var count = 0;
    var interval;
    var limit = 5;  // default

    return function(num) {
      limit = num || limit;

      if (interval) {

        if (++count >= limit) {
          interval && clearInterval(interval);
        }
        console.log('running number ' + count);

      } else {
        interval = setInterval(arguments.callee, 1000);
      }
    }

}())

The advantage of setTimeout is that you can adjust the time between runs to make it more regular, setInterval just tries to run as regularly as it can.