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个快速闪烁，更长时间的停顿，然后是另一组闪烁。想想霓虹招牌。如果有帮助，则codepen链接为here。

Answer 1

如果您只是将4更改为3，则可以正常使用。或者任何奇数。我建议1，然后删除循环。

为什么？

初始状态 - ＆gt;关闭。
1 - ＆gt;上。
2 - ＆gt;关闭。
3 - ＆gt;上。
4 - ＆gt;关闭。

每1-4000毫秒，通过将状态恢复到起始位置，你什么都不做。

编辑：我现在看到你想要完成的事情。这是一个更新的jsfiddle：http://jsfiddle.net/L2nt33os/6/

它应该做你需要的。

$(function () {
    function longFlicker(callback) {
        $("#text").toggleClass('on');
        var wait = 1000+(Math.random() * 3000);
        setTimeout(shortFlickers, wait, 5);
    }
    function shortFlickers(remaining) {
        if (!remaining) return longFlicker();
        $("#text").toggleClass('on');
        var wait = (Math.random() * 300);
        setTimeout(shortFlickers, wait, remaining-1);
    }
    longFlicker();
});

Answer 2

那是因为你正在循环＃34; setTimeout＆＃34;而＆＃34; setTimeout＆＃34;仍然活跃。总结导致错误的超时。

您要搜索的内容不是＆＃34; for循环＆＃34;。检查此代码（谢谢Kaiido）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

早期版本有效，但不如第一个代码段好：

＆＃13;

var inter;

function setInter(){
  inter = setInterval(flicker, Math.random() * 100);
}

function flicker() {
    $("#text").toggleClass('on');
    clearInterval(inter);
    setInter();
}

setInter();

＆＃13;

.on{
  display: none;
}

＆＃13;

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

＆＃13;

具有函数调用问题的For循环

2 个答案: