How to repeat a function with Javascript

Question

This is the code that I've been working on, which makes the background color flicker colors. I'm wondering if anyone knows how to make this repeat so that the background continues to change colors on and on and on.

var a = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77",
                  "66", "55", "44", "33", "22", "11", "00", "00", "11",
                  "22", "33", "44", "55", "66", "77", "88", "99", "AA",
                  "BB", "CC", "DD", "EE", "ff");

x = 0;

var b = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77",
                  "66", "55", "44", "33", "22", "11", "00", "00", "11",
                  "22", "33", "44", "55", "66", "77", "88", "99", "AA",
                  "BB", "CC", "DD", "EE", "ff");

x = 0;

var c = new Array("00", "11", "22", "33", "44", "55", "66", "77", "88",
                  "99", "AA", "BB", "CC", "DD", "EE", "ff", "ff", "ee",
                  "dd", "cc", "bb", "aa", "99", "88", "77", "66", "55",
                  "44", "33", "22", "11", "00");

x = 0;

function bg_eff() {
  col_val = "#" + a[x] + b[x] + c[x];
  document.bgColor = col_val;
  x++;
  if (x == 32) {
    clearInterval(change_bg);
  }
}
change_bg = setInterval("bg_eff()", 50);

Answer 1

x = (x + 1) % 32;

此外，您应该删除clearInterval （和关联的if），并且不需要为setInterval使用字符串：

change_bg = setInterval(bg_eff, 50);

Answer 2

modified code here (using jquery)

http://jsfiddle.net/generalhenry/S8g6k/1/

I use a recursive setTimeout instead of the interval, it's more resilient that way (if your function takes longer than the interval nothing odd occurs)

Answer 3

I would do this:

x += 1;
if ( x === 32 ) { x = 0; }

Answer 4

in addition to Matthew's answer but since the arrays are in the same sequence, you could do something like this.

var a = new Array("ff", "ee", "dd", "cc", "bb", "aa", "99", "88", "77", "66", "55", "44", "33", "22", "11", "00", "00", "11", "22", "33", "44", "55","66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "ff");  // one array
var x = 0;  // var for not global (even though in this context it still is...)
function big_eff() {
    col_val = "#" + a[x] + a[(x + 5) % 32] + a[(x + 10) % 32]; // or whatever spacing you want
    document.bgColor = col_val;
    x = (x + 1) % 32;
    setTimeout("big_eff()",50);  // setTimeout baby!
}

Answer 5

a new version with pure Jquery

http://jsfiddle.net/generalhenry/S8g6k/5/

I use .animate for much cleaner code (no need for the arrays or the x++)

oh and warning: scary color swaping

$("body").css("background-color","#ffff00");
var bg_eff;
(bg_eff = function(x)
{
   var duration = 1600;
   if(x)
   {
       $("body").animate({backgroundColor:"#0000ff"},duration,function(){
           bg_eff(false);
       });
   }
   else
   {
       $("body").animate({backgroundColor:"#ffff00"},duration,function(){
           bg_eff(true);
       });
   }
})(true);