3

您好，这非常接近于：

jquery 循环遍历不同的背景

该解决方案确实对我有用，但是我不希望在准备好文档时更改背景-它们应该由函数触发。由于某种原因，这使得背景变化太快，它们一次闪烁 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 秒更改一次。帮助？

4

5 回答 5

2

使用递归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/

于 2012-08-31T16:04:53.380 回答
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);
于 2012-08-31T16:05:50.587 回答
0

你原来的问题的答案有一个（正确的）你错过了递归调用：

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

您在此处的示例没有multicolour()使用 setTimeout 递归调用自身

于 2012-08-31T16:05:35.157 回答
0

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

window.setInterval( multicolour(), 3000);

试试这个：

window.setInterval( multicolour, 3000);
于 2012-08-31T16:09:01.193 回答
0

它将像这样工作：

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 函数，而不是函数的返回值。

工作小提琴

于 2012-08-31T16:11:22.860 回答