在for循环中使用setTimeout失败

failing to use setTimeout in a for-loop

本文关键字：setTimeout 失败 for 循环      更新时间：2024-04-25

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

为了让这个过程慢到可以看到一些东西，我想使用setTimeout方法。我做了一些关于在循环中使用setTimeout的研究，发现了这一点。

循环中的setTimeout不打印连续值

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

编辑：它现在工作（它使用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>

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

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

试试这个：

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

通过这种方式，您给了一个没有参数的匿名函数setTimeout，但该函数恰好有您想要的参数。

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

相关文章：