Queueing setTimeout in javascript

Question

I need to flash an element off and on. This works but I don't really like the code. Is there a nice way of doing this?

setTimeout(function(){
  toggle();
  setTimeout(function(){
    toggle();
    setTimeout(function(){
      toggle();
      setTimeout(function(){
        toggle();
      }, 100);
    }, 100);
  }, 100);
}, 100);

I'm using jQuery too if that helps.

Answer 1

I would use a blinking effect. For jquery there's pulsate, hope that works for you.

Answer 2

function toggle_multiple(n)
{
    var toggled = 0;
    function toggle_one_time()
    {
        toggle();
        toggled += 1;
        if (toggled <= n)
            setTimeout(toggle_one_time, 100);
    }
    toggle_one_time();
}

And just call toggle_multiple(4).

Answer 3

You can do like this:

function toggleMany(cnt) {
   toggle();
   if (--cnt >= 0) window.setTimeout('toggleMany('+cnt+')', 100);
}

toggleMany(4);

Answer 4

Why not use setInterval?

var toggler = function() {
    if (++self.counter >= self.BLINK_AMOUNT * 2) {
        self.counter = 0;
        window.clearInterval(self.timer);
        return;
    }
    toggle();
};
toggler.BLINK_AMOUNT = 1;
toggler.counter = 0;
toggler.timer = window.setInterval(toggler, 100);

I can't remember whether or not IE properly implements the self variable in a timer callback - if it doesn't, use a uniquely named global variable instead.

Answer 5

Here's yet another version for simplicity:

for (var i= 0; i<4; i++)
    setTimeout(toggle, (i+1)*100);

For larger numbers an interval may be more appropriate, but if it's just four toggles multiple timeouts are fine.

Answer 6

A recursive approach:

function multiTimeoutCall (callback, delay, times) {
    if (times > 0){
      setTimeout(function () {
        callback();
        multiTimeoutCall (callback, delay, times - 1);
      }, delay);
    }
}

Usage:

multiTimeoutCall (toggle, 100, 4);

Edit: Yet another approach, without filling the call stack:

function multiTimeoutCall (callback, delay, times) {
  setTimeout(function action() { // a named function expression
    callback();
    if (--times > 0) {
      setTimeout (action, delay); // start a new timer
    }
  }, delay);
}

I could used arguments.callee instead of a named function expression, but seems that it will be deprecated some day in ECMAScript 5...

Answer 7

Generalizing 'unknown's' idea of using setInterval,

function schedule(fn, max, delay)
{
    var counter = 0;
    var interval = setInterval(
        function()
        { 
            if(counter++ === max)
                clearInterval(interval);
            fn();
        }

       , delay);
}

Usage:

schedule(toggle, 4, 100);

Answer 8

If its just flashing that is required, why not use the jQuery animate ? I use the following to direct user attention to messages. But you can do this for any element -

$("#message_box").fadeOut(450).fadeIn(350);

If you want it multiple times, do this -

$("#message_box").fadeOut(450).fadeIn(350).fadeOut(450).fadeIn(350);