title: Promise flattening fails - why?
body: <pre><code>const simplePromise = i =&gt; {
      return new Promise(function(resolve, reject) {
          console.log(i);
          setTimeout(function(){
              resolve();
          }, 2000);
      });
  }
  
  var anchor = simplePromise(0);
  for (var i=1; i&lt;4; i++) {
      anchor = anchor.then(_ =&gt; simplePromise(i));
  }
  </code></pre>
  
  <p>prints:</p>
  
  <pre><code>0
  4
  4
  4
  4
  </code></pre>
  
  <p>instead of:</p>
  
  <pre><code>0
  1
  2
  3
  4
  </code></pre>
  
  <p><strong>1. Can someone explain why? and 2. tell me how to achieve this?</strong></p>
  
  <p>I can see that the first promise is executed (<em>i=0</em>), then the loop runs and <em>then</em> the value of i(<em>=4</em>) gets passed to the next promise. Shouldn't this be solved by having a function inside <em>then</em> (_ => simplePromise(i)) ?</p>