javascript - 带有函数调用问题的 For 循环

Question

我正在 codePen 上制作一个简单的 HTML/CSS/JavaScript 文本演示，我在 JavaScript 中循环函数时遇到问题。这是我到目前为止所拥有的。

function loop() {
    var i;
    for (i = 0; i < 4; i++) {
        flicker();
    }
    var wait = (Math.random() * 4000);
    setTimeout(loop, wait);
}

function flicker() {
    $("#text").toggleClass('on');
}

loop();

如果我去掉 for 循环，文本会闪烁。一旦我将其重新添加进去，它就会卡住。任何帮助，将不胜感激。

编辑:我想要获得的效果是 2 到 4 次快速闪烁，较长的停顿，然后是另一组闪烁。想想 NEON 。 codepen 链接是 here如果有帮助。

Answer 1

那是因为当“setTimeout”仍处于事件状态时，您正在循环“setTimeout”。您总结导致错误的超时。

您要搜索的不是“for 循环”。检查此代码(感谢 Kaiido):

var lastTime = 0;

function flickerPauses(){
  if(lastTime < 5){
    lastTime ++;
    return Math.random()*100;
  }else{
    lastTime = 0;
    return Math.random()*1200 + 100;
  }
}

function flicker() {
  $("#text").toggleClass('on');
  setTimeout(flicker, flickerPauses());
}

flicker();

.on{
  display: none;
}
div{
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text"> Beer </div>

早期版本可以工作但不如第一个片段好:

var inter;

function setInter(){
  inter = setInterval(flicker, Math.random() * 100);
}

function flicker() {
    $("#text").toggleClass('on');
    clearInterval(inter);
    setInter();
}

setInter();

.on{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text"> asdf </div>

• http://www.w3schools.com/jsref/met_win_setinterval.asp

• https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval