如何在 JavaScript 中使用计时器循环而不冻结浏览器？答案

【问题标题】：How do I use a use a timer loop in JavaScript without freezing the browser?如何在 JavaScript 中使用计时器循环而不冻结浏览器？
【发布时间】：2017-03-19 02:29:53
【问题描述】：

我正在尝试学习如何使用 Javascript 和 CSS 动态更改浏览器中的显示。一切都很顺利，直到我尝试循环更改。代码触发一次并且工作正常，但是当我尝试循环它时，我尝试的每个循环都会冻结浏览器。我显然是 JavaScript 的新手，并且做错了一些事情。问题代码如下：

function changes()
{
  var x = 0;  
  do
  {    
    setTimeout(timerRed, 3000);  
    setTimeout(timerWhite, 6000); 
    setTimeout(timerBlue, 9000);
    setTimeout(timerBlack, 12000);  
    setTimeout(timerGreen, 18000); 
    setTimeout(timerOrange, 21000);
    setTimeout(timerClear(x), 24000);  
  } while (x >= 0);  
}

我将跳过 timerRed() 等...为了节省空间并且因为 CSS 更改工作正常。在循环结束时，我试试这个：

  function timerClear(x) 
  {
    clearTimeout(x); 
    x = 0; 
  }

然后冻结浏览器。那么，循环这些函数的正确方法是什么。

谢谢

PS：换句话说，我想无限循环或循环颜色函数，而不锁定浏览器。

【问题讨论】：

无限循环... x 永远不会
我查看了其他循环代码，但不适用于我的情况。
但这就是问题所在，它应该是一个无限循环。我希望颜色循环一直持续到浏览器关闭。那么如何在不锁定浏览器的情况下循环呢？
setInterval(changes, 24000)。（并失去循环，如前所述。）

标签： javascript css loops timer

【解决方案1】：

我可能会误解，但如果你打算让这些计时器永远触发，你应该使用一个间隔，它会一直触发直到停止：

function changes()
{ 
    setInterval(timerRed, 3000);  
    setInterval(timerWhite, 6000); 
    setInterval(timerBlue, 9000);
    setInterval(timerBlack, 12000);  
    setInterval(timerGreen, 18000); 
    setInterval(timerOrange, 21000);
}

如果您需要停止其中一个，请像这样创建它：

var redInterval = setInterval(timerRed, 3000);

...然后停止它：

clearInterval(redInterval);

【讨论】：

嗯，这是朝着正确方向迈出的一步，谢谢。唯一的问题是，这些功能是无序的。红白。蓝色、黑色、红色早起、绿色、橙色、黑色无序、蓝色无序等......
那是因为它们各自以不同的频率发射。要保留相同的序列，请在所有 setInterval 调用中使用相同的毫秒数，并在它们之间等待。
谢谢你。究竟什么是“等待”？我将如何编码？
weir的意思是你把红色的间隔设置为3000（3秒），白色的6000（6秒）等。让它们都一样，比如3000，它们都会触发同时。更好的是，如果您打算让所有代码同时触发，则只需设置一个间隔并将所有代码放入该函数中。这使得不需要多个实例“setInterval”。

【解决方案2】：

丢失 do while 循环。您正在创建无数个这些计时器，而这些计时器又会触发每个回调函数无数次。另请注意，您的局部变量 x 不在回调范围内。

【讨论】：

“那么，循环这些函数的正确方法是什么” - 你只说了不做什么...... OP想要永远循环的代码（不冻结浏览器）。
which in turn are firing - 它们都不会触发，因为循环永远不会退出
明白了！！我必须照顾生病的亲人，然后我会发布代码。谢谢大家的意见。

【解决方案3】：

好的，知道了！！

  function changes()
  {
    color(); // changes() tests a lot of JavaScript CSS I've been trying out, but color() is the only thing relevant to my question, the rest would just be clutter.    
  }

  function color() 
  {
    setTimeout(timerRed, 0000);  
    setTimeout(timerWhite, 3000); 
    setTimeout(timerBlue, 6000);
    setTimeout(timerBlack, 9000);  
    setTimeout(timerGreen, 12000); 
    setTimeout(timerOrange, 15000);
    // And I create the infinite loop of color cycling with**out** locking up the browser by having color call itself at the end of every color cycle
    setTimeout(color, 18000);        
   }

谢谢大家的意见。希望这将有助于遇到这个问题的下一个 JavaScript 新手。

【讨论】：