Question

我正在尝试学习如何使用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：换句话说，我想无限循环或循环颜色函数，而不需要锁定浏览器。

Answer 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);

Answer 2

丢失do while循环。你正在创造每个计时器中的大量数据，这反过来又会使每个回调函数发射数十亿次。另请注意，您的局部变量x不在回调范围内。

Answer 3

好的，GOT IT !!

  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新手。

如何在不冻结浏览器的情况下在JavaScript中使用计时器循环？

3 个答案: