在递归结束之前，Javascript 不会更改递归函数内部的 CSS

Question

我试图创建一个页面，其中背景循环显示每个十六进制值(从#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)。此函数将在将背景颜色更改为其到达的最终十六进制代码之前进行短暂处理。我怎样才能让它在每次进入函数时改变颜色而不是在最后完成堆栈。

Answer 1

您正在将调用 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)