Question

你好，这是基于：

jquery loop through different backgrounds

这个解决方案对我有用，但是我不希望背景在文档就绪时改变 - 它们应该由一个函数触发。由于某些原因，这会使背景变化太快，它们会立刻闪烁3，所以看起来循环已经在某处运行：

function run()
{
// Set multicolour backgrounds
window.setInterval( multicolour(), 3000);
}

var colour = 0;
var colours = Array('', 'pink', 'red', 'green', 'light');

function multicolour()
{
    colour = (colour+1) % colours.length ;
    $('body').attr('id', colours[colour]);
    console.log(colour);
}

仅供参考，控制台日志显示每3秒闪烁3次，而不是每3秒更换一次。帮助

Answer 1

使用递归setTimeout并使用一个公共计时器变量，该变量将被无意的代码覆盖覆盖。

window._timers = {
  changeBackground : null
};

var colour = 0;
var colours = Array('', 'pink', 'red', 'green', 'light');

function multicolour()
{
    colour = (colour+1) % colours.length ;
    $('body').attr('id', colours[colour]);

    // Set multicolour backgrounds
    clearTimeout(window._timers.changeBackground);
    window._timers.changeBackground = setTimeout(multicolour, 3000);
}

演示：http://jsfiddle.net/FgkWx/

Answer 2

一些语法问题。您需要将function reference传递给window.setInterval

我还清理了你的数组声明。我没有jQuery，所以我没有尝试运行此代码。

function run()
{
  // Set multicolour backgrounds
  window.setInterval( multicolour, 3000);
}

var colour = 0;
var colours = ['', 'pink', 'red', 'green', 'light'];

function multicolour()
{
  colour = (colour+1) % colours.length ;
  $('body').attr('id', colours[colour]);
  console.log(colour);
}

嗯....尝试这个不会污染全球空间的那个：这使用了一些更高级的Javascript方法，但这种“颜色”和“颜色”不会泄漏到全局空间并污染事物。

var changeBackground = (function() {

  var colour = 0;
  var colours = ['', 'pink', 'red', 'green', 'light'];

  return function() {
    colour = (colour+1) % colours.length ;
    document.body.id =  colours[colour];
    console.log(colour);

  };

}());

window.setInterval( changeBackground, 3000);

Answer 3

您的原始问题的答案有一个您错过的（正确的）递归电话：

setTimeout(changeBackground, 2000); // called from changeBackground()

此处的示例没有multicolour()使用setTimeout

递归调用自身

Answer 4

您正在调用setInterval声明中的回调函数：

window.setInterval( multicolour(), 3000);

试试这个：

window.setInterval( multicolour, 3000);

Answer 5

它会像这样工作：

var colour = 0;
var colours = Array('', 'pink', 'red', 'green', 'light');

function multicolour(){
    colour = (colour+1) % colours.length ;
    $('body').attr('id', colours[colour]);
    console.log(colour);
}

setInterval( multicolour, 3000);

您需要将函数引用传递给setInterval函数，而不是函数的返回值。

Working fiddle

setInterval用于更改函数的背景

5 个答案: