executing a series of function calls after setTimeout - JavaScript

Question

I have the following piece of code:

    var gradient = new Gradient( element, [0, 0.99] );
    setTimeout( function(){
        gradient.push( [0, 0.99] );
    }, 3000);

    setTimeout( function(){
        gradient.pop();
    }, 3000);

    setTimeout( function(){
        gradient.shift();
    }, 3000);

    setTimeout( function(){
        gradient.map( function( stop ){
                return Math.min( 1, stop + 0.392 );
            });
    }, 3000);

    setTimeout( function(){
        gradient.unshift( 0 );
        gradient.pop();
    }, 3000);

    gradient.clear();

I have a radial gradient that changes after each function call ( a different operation on the gradient ). To finally demonstrate the change made by each function call, I set up a series of setTimeout() so the user can see the changes taking place. I was expecting after each function call, the corresponding operation to be performed, but when I test on the browser, only the last of the calls ( gradient.clear() ) is performed. I'm not sure the previous setTimeout calls are being executed, or it's being skipped until the last call. Any idea ?

Otto Allmendinger · Accepted Answer · 2012-10-22 20:18:29Z

5

You mustn't confuse setTimeout with pause. The MDN documentation defines setTimeout as

Calls a function or executes a code snippet after specified delay.

There is no mention of pausing the execution of the program.

setTimeout(f, 3000);
setTimeout(g, 3000);

h();

This code first executes the function h, then f and g three seconds after that (not simultaneously, weather g or f comes first may differ between implementations.)

What you are looking for is chaining of events - calling setTimeout from inside a setTimeout function.

What you want can be realized with an effect queue

var q = []

function run() {
    var item = q.shift();
    item.func();
    if (q.length > 0) {
        setTimeout(run, item.pause);
    }
}

q.push({ func: f1, pause: 1000 });
q.push({ func: f2, pause: 1000 });

run();

Here function f1 will execute, f2 will execute a second after that.

edited Oct 22, 2012 at 20:18

answered Oct 22, 2012 at 13:54

Otto Allmendinger

28.5k7 gold badges71 silver badges79 bronze badges

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

1 Comment

cybertextron Over a year ago

Could you please give me more details?

Collectives™ on Stack Overflow

executing a series of function calls after setTimeout - JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related