Question

我正在制作一个测试页面，其中包含执行不同脚本的按钮。我想每秒改变背景颜色5秒，总共5种颜色。我已经在setInterval和setTimeout上阅读和观看了视频，而我却无法获得这些视频。

我想要的是什么：

x
wait 1sec   
y
wait 1sec  
z
wait 1 sec
etc...

我想在一个函数中完成所有操作，但由于看似需要引用setTimeout(function, 500)

中的函数，我放弃了

所以我为每个颜色变化创建了一个新函数，然后创建了一个disco()来调用每个背景变化。

说实话，有点困惑，代码应该澄清我尝试过的内容。我只想说它不起作用，这就是我放弃的地方。

我非常感谢解释如何做到这一点。谢谢！

function disco() {
    setTimeout(aquaman, 500);
    setTimeout(pinkman, 500);
    setTimeout(blueman, 500);
    setTimeout(redman, 500);
    setTimeout(brownman, 500);
}

function aquaman() {
    document.body.style.backgroundColor = "aqua";
}

function brownman() {
    document.body.style.backgroundColor = "brown";
}

function redman() {
    document.body.style.backgroundColor = "red";
}

function pinkman() {
    document.body.style.backgroundColor = "pink";
}

function blueman() {
    document.body.style.backgroundColor = "blue";
}

Answer 1

下面的代码会将背景颜色更改为数组中的下一个颜色，您需要做的就是将其间隔设置为您希望颜色更改的时间，如果您对此有疑问，请删除注释它是如何工作的：

＆＃13;

    function changeColor(){
       var colors = ['aqua','brown','red','pink','blue'],
           currColor = ( ( colors.indexOf( document.body.style.backgroundColor ) + 1 ) % 5 );
       
       if(currColor === -1) currColor = 0;

       document.body.style.backgroundColor = colors[ currColor ];
    }

    setInterval(changeColor, 1000)

＆＃13;

Answer 2

＆＃13;

    var bg = {
        colors: ['red','blue', 'green'],
        next: 0,
        getNextColor: function(){
            return this.colors[this.next++ % this.colors.length];
        }
    };

    setInterval(function () {
          document.body.style.backgroundColor = bg.getNextColor();
        }, 1000);

＆＃13;

Answer 3

setTimeout()是一个异步API。您使用它来调用浏览器执行您在n毫秒后传递的函数。所有setTimeout（）调用都将超时设置为500，这意味着所有这些函数将在大致相同的时间执行。

此：

function disco()
{
setTimeout(aquaman, 500);
setTimeout(pinkman, 1000);
setTimeout(blueman, 1500);
setTimeout(redman, 2000);
setTimeout(brownman, 2500);
}

将达到预期的结果，但考虑将此函数编写为更具编程性的重构：

function aquaman() {
  document.body.style.backgroundColor = "aqua";
}

function brownman() {
  document.body.style.backgroundColor = "brown";
}

function redman() {
  document.body.style.backgroundColor = "red";
}

function pinkman() {
  document.body.style.backgroundColor = "pink";
}

function blueman() {
  document.body.style.backgroundColor = "blue";
}

function disco() {
    var timeout = 500;
    var funcs = [aquaman, brownman, redman, pinkman, blueman];
    funcs.forEach(function(func) {
      setTimeout(func, timeout);
      timeout += 500;
    });
}

此示例减少了一些重复，但不是全部。我们仍然可以将那些不必要的，重复的函数定义分解出来：

function disco() {
    var timeout = 500;
    var colors = ['aqua', 'brown', 'red', 'pink', 'blue'];
    colors.forEach(function(color) {
      setTimeout(function() {
        document.body.style.backgroundColor = color;
      }, timeout);
      timeout += 500;
    });
}

这是解决您问题的完美解决方案。

Answer 4

＆＃13;

 var colors = ['red','pink','blue'];
    var currentColor = 0;
    function changeColor() {
      setTimeout(function() {
        if(currentColor === colors.length) {
           currentColor = 0;
        }
        document.body.style.backgroundColor = colors[currentColor];
        changeColor(currentColor++);
      }, 500);
    }
    changeColor();

＆＃13;

在setTimeout中递归执行changeColor，因为你想延迟每次执行500ms

Answer 5

非常基本：

<script>

(function disco() {
   setTimeout(function aquaman() {document.body.style.backgroundColor = "aqua";}, 0);
    setTimeout(function pinkman() {document.body.style.backgroundColor = "pink";}, 1000);
    setTimeout(function blueman() {document.body.style.backgroundColor = "blue";}, 2000);
    setTimeout(function redman() {document.body.style.backgroundColor = "red";}, 3000);
    setTimeout(function brownman() { document.body.style.backgroundColor = "brown";}, 4000);
})();
</script>

演示：http://jsbin.com/qumagozosi/edit?html,js,output

Javascript延迟

5 个答案: