javascript - 如何在不卡住浏览器的情况下在 JavaScript 中使用计时器循环？

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