Question

我想用for做一个简单的迭代数组。但是不能使该脚本正常工作。。。如果有人可以给出自我学习的指导，我将不胜感激！

    var colors = ['green', 'red', 'blue', 'grey', 'orange'];
    function chColor(){
    setInterval(
	 function(colors){
  	  for(var i = 0; i <= colors.lenght; i++){
			document.body.style.backgroundColor = Colors[i];
		}},3000)}
    (function(){setTimeout(function(){chColor()},3000);})();

Answer 1

需要大量更正。在下面找到嵌入式注释：

var colors = ['green', 'red', 'blue', 'grey', 'orange'];
function chColor(){
  setInterval(
    function(){ // do not pass colors in the method here, global colors should be used. 
      for(var i = 0; i < colors.length; i++){ // i should be < colors.length, it's 0 indexed.
        console.log(colors[i])// should be colors[i] not Colors[i]
      }},1000)}
(function(){setTimeout(chColor,1000);})(); // don't really need to make a blank function and call chColor, passing the function name will do. it's a callback

尝试运行该代码段。

PS：在此示例中，时间缩短为1秒。

编辑：如果要在每n秒之间更改颜色：

var colors = ['green', 'red', 'blue', 'grey', 'orange'];
function chColor(){
  var i = 0; 
  setInterval(function(){
    document.body.style.backgroundColor = colors[i];
    i = (i+1) % colors.length; // increment i and cycle through loop
  },1000)
}

(function(){setTimeout(chColor,1000);})();

Answer 2

您可以获取颜色的索引，并在每个间隔后递增，并使用余数运算符和数组长度进行调整。

您的问题：

带有参数的函数的时间间隔，此参数永远不会被移交，因此它是undefined。
for在间隔中循环，直接循环，并以使用过的
数组Colors不存在。 Javascript是区分大小写的语言。
由于for循环的缘故，如果采用正确的数组，则最终的颜色始终是相同的。
不清楚使用setTimeout的情况，这会使chColor的呼叫延迟3秒钟。颜色的第一个变化是在3秒钟后发生的其他情况……

function chColor(colors, i) {
    setInterval(
        function() {
            document.body.style.backgroundColor = colors[i];
            i++;
            i %= colors.length;
        },
        3000
    );
}

var colors = ['green', 'red', 'blue', 'grey', 'orange'];
chColor(colors, 0); // take colors as array and start with index zero

SetInterval和SetTimeout迭代数组

2 个答案: