title: Wait until all promises are resolved in JavaScript
body: <p>I'm not optimistic there's a way to do this, but I wanted to put the question out there. The situation: I'm writing a JavaScript game engine that's tailored for novice programmers. I want the primary scripting interface to be as simple and accessible as possible. Ideally, scripts would end up looking something like this:</p>
  
  <pre><code>this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000, sync: true });
  this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });
  </code></pre>
  
  <p>In this scenario, the first backdrop would fade in completely over the course of one second, then the second backdrop would fade in synchronously. The problem? JavaScript will try to execute the second command before the first has completed.</p>
  
  <p>Now, the right way to handle this would be to use promises. Something like:</p>
  
  <pre><code>this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000 }).then(() =&gt; {
    this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });
  });
  </code></pre>
  
  <p>Which is totally an option. (In fact, it's probably what I'll have to settle for.) But there are two reasons why I'd prefer not to go this route. First, it adds a lot of extra verbiage to what is meant to be a simple script. I'd like this to look unintimidating to new programmers, and all those nested functions are gonna start looking scary. Secondly, promises don't handle control flow super well. Even something as simple as an if-then statement will get gnarly.</p>
  
  <p>What I'd really like is some way to do this:</p>
  
  <pre><code>this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000, sync: true });
  waitUntilAllPromisesAreResolved();
  this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });
  </code></pre>
  
  <p>But that's a pipedream, isn't it? If you can think of a way to make that real, I'd love to hear it.</p>