title: async update DOM from Promises
body: <p>I want to update the DOM through my promises. I build an array of promises and run them with Promise.all:</p>
  
  <pre><code>function test(i){
    return Promise.resolve()
    .then(function() {
      // update the DOM
      document.getElementById('progress').innerHTML += i;
      return i;
    });
  }
  
  var loadSequence = [];
  // loop through all the frames!
  for (var i = 0; i &lt; 9999; i++) {
    loadSequence.push(test(i));
  }
  
  Promise.all(loadSequence)
  .then(function(){
    window.console.log('all set...');
  });
  </code></pre>
  
  <p><a href="http://codepen.io/nicolasrannou/pen/jbEVwr" rel="noreferrer">http://codepen.io/nicolasrannou/pen/jbEVwr</a></p>
  
  <p>I can not get the DOM to be updated in real time.
  It only updates the DOM when all my promises have resolved.</p>
  
  <p>Is it the expected behavior? If so, how can I make use of Promise.all to update my DOM in real time?</p>
  
  <p>I want to use promises instead of the "setTimeout(function, 1000)" hack but I can not find the good way to do it.</p>