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.

Pierre Bourdon · Accepted Answer · 2009-09-29 01:08:20Z

4

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

edited Sep 29, 2009 at 1:08

answered Sep 28, 2009 at 23:45

Pierre Bourdon

10.9k4 gold badges36 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bobince Over a year ago

toggled=0 probably should have a var to prevent an accidental global.

Vitali Over a year ago

I'd recommend renaming it to toggle_multiple & pass in the amount as an argument. That way it's a more generic solution.

Christian C. Salvadó · Accepted Answer · 2009-09-29 02:17:14Z

3

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...

edited Sep 29, 2009 at 2:17

answered Sep 29, 2009 at 0:55

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Comments

Vitali · Accepted Answer · 2009-09-28 23:57:45Z

2

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.

answered Sep 28, 2009 at 23:57

Vitali

3,7652 gold badges28 silver badges29 bronze badges

2 Comments

bobince Over a year ago

self is the global (window) object in JavaScript. You are probably thinking of this. And no, this will not point to the toggler on any browser, but since you're just using a function rather than a full method, you can get that from arguments.callee.

SolutionYogi Over a year ago

Great idea! This is what you call 'thinking outside the box.'! :)

airportyh · Accepted Answer · 2009-09-28 23:43:45Z

1

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

answered Sep 28, 2009 at 23:43

airportyh

22.8k13 gold badges61 silver badges75 bronze badges

Comments

bobince · Accepted Answer · 2009-09-29 00:17:23Z

1

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.

answered Sep 29, 2009 at 0:17

bobince

538k111 gold badges675 silver badges846 bronze badges

1 Comment

Chii Over a year ago

if for some reason the browser slowed, or was busy, and couldnt execute one of the setTimeout, then all the timing is thrown off - you cannot guarantee that the toggle function is called (i+1)*100 millisecond apart using this loop.

Community · Accepted Answer · 2017-05-23 12:11:20Z

1

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

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Sep 29, 2009 at 1:52

SolutionYogi

32.4k12 gold badges73 silver badges79 bronze badges

Comments

PlanetUnknown · Accepted Answer · 2010-01-11 21:19:30Z

0

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

answered Jan 11, 2010 at 21:19

PlanetUnknown

4,0145 gold badges52 silver badges68 bronze badges

1 Comment

PlanetUnknown Over a year ago

Actually just saw Toby's reply above. Its a more elegant way. Let me up his reply.

Guffa · Accepted Answer · 2009-09-28 23:48:12Z

-2

You can do like this:

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

toggleMany(4);

answered Sep 28, 2009 at 23:48

Guffa

703k111 gold badges760 silver badges1k bronze badges

4 Comments

nickf Over a year ago

remember that eval is evil! window.setTimeout(toggleMany, 100, cnt) is much neater, IMO anyway.

Guffa Over a year ago

@nickf: Yes, but some browsers have problems with that. A string works everywhere.

SolutionYogi Over a year ago

-1. You should always pass a proper JS function to setTimeout and not the JS code as string.

SolutionYogi Over a year ago

Yes, I am aware that a long time back, setTimeout only used to accept JS code as first parameter. But support for function as the first argument has been added since IE5/Netscape4 (Verified from MS and Mozilla's documentation). Nowadays, there is absolutely no reason to pass JS code to setTimeout as I believe that all the current browsers support setTimeout correctly. And even if there was an issue with setTimeout, you should have mentioned the proper solution and posted your version as an alternate workaround if the code doesn't work in the browser the OP is targetting.

Collectives™ on Stack Overflow

Queueing setTimeout in javascript

8 Answers 8

2 Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related