Javascript在递归函数内部不改变CSS，直到递归结束

我试图创建一个页面，其中背景循环遍历每个十六进制值（从＃000000到#FFFFFF）。这是JS的功能，我使用：Javascript在递归函数内部不改变CSS，直到递归结束

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处的“堆栈限制”）。在将背景颜色更改为所达到的最终十六进制代码之前，此函数将简要处理。我怎样才能让它在每次进入函数时改变颜色，而不是在最后完成堆栈。

来源

2017-05-08 KangarooChief

DOM不会在while/for循环中更新。应该怎么做，以setTimeout – epascarello

改变'window.setTimeout（Colors（count），10）; 'to'window.setTimeout（function（）{Colors（count）}，10）; ' –

这是因为'document.body.style.background = hex;'设置背景颜色并在循环之后调用。 – coderodour

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

来源

2017-05-08 14:32:34 synthet1c

好，谢谢做出这些改变，但这已经不是固定的，只在最后 – KangarooChief

变色问题@Jonasw我认为他们做同样的事情 – KangarooChief

@KangarooChief点击“运行代码片断”那从深蓝色渐变为蓝色，然后循环。你期待它做什么？ – synthet1c

这不会做你认为它的作用：

window.setTimeout(Colours(count),10)

这是执行Colours(count)立即和设置该函数的返回值超时。由于函数执行之间没有超时，所以整个事件都会被阻塞，直到阻塞代码完成后，DOM才会更新。

你想传递一个函数本身，而不是一个函数的执行。在这种情况下，它可能类似于：

window.setTimeout(function() { Colours(count); }, 10)

这会将调用封装在不会立即执行的函数中。那么函数将在超时执行。

来源

2017-05-08 14:32:03 David

@Jonasw：直到阅读这里发布的其他答案之前，我实际上并没有意识到这种功能。这当然似乎更简单:) – David

的Javascript有时可能喜怒无常。您的问题主要基于您的代码没有正确的延迟这一事实，因此浏览器仅通过显示最后一次迭代来进行优化。下面的代码将使用setTimeout解决此问题。请参阅下面的JSFiddle链接。

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)

https://jsfiddle.net/y68sfptp/1/

编辑：对不起，刚才看到了以前的答案。

来源

2017-05-08 14:48:32

Javascript在递归函数内部不改变CSS，直到递归结束

回答

相关问题