javascript - 未能在 for 循环中使用 setTimeout

Question

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

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

setTimeout in for-loop does not print consecutive values

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

编辑:它现在可以工作(它使用 setInterval，因为这在这里可能更有意义)

<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>

Answer 1

我会采用不同的方法，使用 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 可以工作来作弊。