executing a series of function calls after setTimeout - JavaScript
<p>I have the following piece of code:</p>

<pre><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();
</code></pre>

<p>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 ( <code>gradient.clear()</code> ) is performed. I'm not sure the previous <code>setTimeout</code> calls are being executed, or it's being skipped until the last call. Any idea ?</p>
