title: Why is .then() fired before promise has actually resolved?
body: <p>I'm trying to return promises from async tasks so that I can use the <strong>.then()</strong> call to make them synchronous. Unfortunately, I'm experiencing some truly odd behavior. Basically, the third <strong>then()</strong> is executed before the second has resolved. Can someone explain what's going on? Here's my code:</p>
  
  <pre><code>function runReleaseLoop() {
    console.log('Starting release loop');
    const themes = ['blue', 'red'];
    return new Promise(resolve =&gt; {
      buildReleases(themes, resolve);
    })
  }
  
  function buildReleases(themes, onComplete) {
    console.log(themes);
    if (themes.length === 0) {
      onComplete();
    } else {
      const theme = themes.pop();
      Promise.resolve()
        .then(setTheme(theme))
        .then(someDelayedTask(theme))
        .then(buildReleases(themes, onComplete));
    }
  }
  
  function setTheme(theme) {
    return new Promise(resolve =&gt; {
      console.log(`Setting theme to ${theme}`);
      resolve();
    });
  }
  
  function someDelayedTask(theme) {
    console.log(`Starting delayed task related to ${theme}`);
    return new Promise(resolve =&gt; {
      setTimeout(() =&gt; {
        console.log(`Finished delayed task related to ${theme}`);
        resolve();
      }, 3000)
    });
  }
  
  // Run the process
  runReleaseLoop()
    .then(() =&gt; {
      console.log('Release loop finished')
    });
  </code></pre>
  
  <p>Here is my console output:</p>
  
  <pre><code>"Starting release loop"
  ["blue", "red"]
  "Setting theme to red"
  "Starting delayed task related to red"
  ["blue"]
  "Setting theme to blue"
  "Starting delayed task related to blue"
  []
  "Release loop finished"
  "Finished delayed task related to red"
  "Finished delayed task related to blue"
  </code></pre>