title: How to sequentially run promises with Q in Javascript?
body: <p>I am having a hard time running promises sequentially.</p>
  
  <pre><code>var getDelayedString = function(string) {
      var deferred = Q.defer();
  
      setTimeout(function() {
          document.write(string+" ");
          deferred.resolve();
      }, 500);
  
      return deferred.promise;
  };
  
  var onceUponATime = function() {
      var strings = ["Once", "upon", "a", "time"];
  
      var promiseFuncs = [];
  
      strings.forEach(function(str) {
          promiseFuncs.push(getDelayedString(str));
      });
  
      //return promiseFuncs.reduce(Q.when, Q());
      return promiseFuncs.reduce(function (soFar, f) {
          return soFar.then(f);
      }, Q());    
  };
  
  getDelayedString("Hello")
  .then(function() {
      return getDelayedString("world!")
  })
  .then(function() {
      return onceUponATime();
  })
  .then(function() {
      return getDelayedString("there was a guy and then he fell.")
  })
  .then(function() {
      return getDelayedString("The End!")
  })
  </code></pre>
  
  <p>onceUponATime() should sequentially output ["Once", "upon", "a", "time"] but instead they are being output immediately for some reason.</p>
  
  <p>jsFiddle here: <a href="http://jsfiddle.net/6Du42/2/" rel="noreferrer">http://jsfiddle.net/6Du42/2/</a></p>
  
  <p>Any idea what I am doing wrong?</p>