我试图创建一个页面,其中背景循环显示每个十六进制值(从#000000 到#FFFFFF)。这是我正在使用的 JS 函数:
function Colours(count)
{
count +=1;
if (count > 16777215)
{
count = 0;
}
hex = count.toString(16);
while (hex.length < 6)
{
hex = "0" + hex;
}
hex = "#" + hex;
document.body.style.background = hex;
window.setTimeout(Colours(count),10);
}
它在单击按钮时被调用并被赋予参数 -1(因此第一个十六进制值为 #000000)。
经过一些诊断,它似乎只在递归结束后才改变颜色(在这种情况下,我假设一旦它达到其堆栈限制 #006446)。此函数将在将背景颜色更改为其到达的最终十六进制代码之前进行短暂处理。我怎样才能让它在每次进入函数时改变颜色而不是在最后完成堆栈。
最佳答案
您正在将调用 Colours
函数的结果传递给 setTimeout。您应该传递对该函数的引用,并使用 setTimeout 的第三个参数传递参数。
window.setTimeout(Colours, 10, count + 1);
function Colours(count) {
if (count > 16777215) {
count = 0;
}
hex = count.toString(16);
while (hex.length < 6) {
hex = "0" + hex;
}
hex = "#" + hex;
document.body.style.background = hex;
window.setTimeout(Colours, 10, count + 1);
}
Colours(0)
关于在递归结束之前,Javascript 不会更改递归函数内部的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43850275/