For-loop with function call issue

Question

I'm making a simple HTML/CSS/JavaScript text demo on codePen and I'm having issues with looping a function in the JavaScript. Here's what I have so far.

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

If I take out the for loop, the text flickers. As soon as I add it back in, it freezes. Any help would be appreciated.

EDIT: The effect I'm trying to get is 2 to 4 quick flickers, a longer pause, and then another set of flickers. Think neon signs. The codepen link is here if it helps.

Answer 1

If you simply change 4 to 3 , it will work fine. Or any odd number really. I recommend 1 , and remove the loop.

Why?

Initial state -> off.
1 -> on.
2 -> off.
3 -> on.
4 -> off.

Every 1-4000 ms, you are doing absolutely nothing by keeping the state back to its starting place.

---

Edit: I now see what you are trying to accomplish. Here is an updated jsfiddle: http://jsfiddle.net/L2nt33os/6/

It should do what you need.

$(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

That's because you are looping the "setTimeout" while "setTimeout" is still active. You sum up the timeouts which leads to an error.

What you are searching for is not a "for loop". Check this code (thanks 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> 

An early version which works but isn't as good as the first snippet:

 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