Question

我一直在尝试创建一个JavaScript函数，它快速循环遍历rgb值的所有24位，并以动态变化的div-background的形式显示它们

为了减慢进程，看到我正在考虑使用setTimeout方法。我做了一些关于在循环中使用setTimeout的研究并发现了这一点。

setTimeout in for-loop does not print consecutive values

似乎完美地描述了我的问题。我尝试使用那里给出的解决方案。但由于某种原因，它不起作用。

编辑：它现在有效（它使用setInterval，因为这在这里可能更有意义）

＆＃13;

<script> 

function setColor(i) {
	  var c = i.toString(16);
	  
	  switch(c.length) {
			case 1:
				c = "00000" + c;
				break;
			case 2:
				c = "0000" + c;
				break;
			case 3:
				c = "000" + c;
				break;
			case 4:
				c = "00" + c;
				break;
			case 5:
				c = "0" + c;
				break;
			default:
			   c;
	}
	  document.getElementById("colorContainer").style.background = "#" + c;
	  
	  
}

function loopThroughColors() {
	var i = 0x000000;
	setInterval(function(intervalId) {
	  setColor(i);
	  i += 1;
	  if (i >= 0xffffff) {
		clearInterval(intervalId);
	  }
	}, 100);
}


 </script>

＆＃13;

Answer 1

您的问题是您无法在调用setTimeout时传递参数。

请改为尝试：

function loopThroughColors() {
    for (var i = 0x000000; i <= 0xffffff; i++) {
        setTimeout(function() {
            setColor(i); 
        }, i); 
    }
}

这样你就可以给setTimeout一个没有参数的匿名函数，但是这个函数碰巧有你想要的参数。

正如Bergi所说，当您尝试将参数i传递给setColor时，您实际上只是在评估语句setColor(i)。相反，你需要给出一个函数的名称。

Answer 2

我会采用不同的方法，使用setInterval而不是setTimeout，类似于：

function setColor(i) {
  var c = i.toString(16);
  document.getElementById("colorContainer").style.background = "#" + c;
}

var i = 0x100;
setInterval(function(intervalId) {
  setColor(i);
  i += 1;
  if (i >= 0xfff) {
    clearInterval(intervalId);
  }
}, 100);

#colorContainer {
  width: 100px;
  height: 100px;
}

<div id="colorContainer"></div>

请注意，setColor中存在一个错误 - 它不会在字符串前加0，因此＃100000之前的所有颜色都无法正常工作。我只是通过＃100和#fff之间的颜色来欺骗，以表明setInterval可以工作。

无法在for循环中使用setTimeout

2 个答案: