title: executing a series of function calls after setTimeout - JavaScript
body: <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>