XHR OnLoad承诺阻止其他OnLoad回调

Question

我正在尝试从服务器下载文件，然后在加载的数据上运行承诺。我的问题是，我的承诺似乎是出于某种原因阻碍了一切：

它开始下载所有文件，一旦第一个文件被下载，它会阻止其他人下载并运行其"onLoad“回调完整承诺链，然后继续下载其余的文件。一旦一个新文件完成，它会阻止其他下载并运行承诺链等等。

我的onload回调包含以下内容：

function(response) {

  window.console.log('on load callback...');

      var sequence = Promise.resolve();
      sequence
      .then(function(){
        sleep(10000);
        window.console.log('sleep 1 is over...');
        return 'DONE!';
      })
      .then(function(){
        sleep(10000);
        window.console.log('sleep 2 is over...');
        return 'DONE!';
      })
      .then(function(){
        sleep(10000);
        window.console.log('sleep 3 is over...');
        return 'DONE!';
      });
}

我的睡眠功能如下：

 function sleep(milliseconds) {
   var start = new Date().getTime();
   for (var i = 0; i < 1e7; i++) {
     if ((new Date().getTime() - start) > milliseconds){
       break;
    }
  }
 }

在控制台中，它返回：

on load callback...
sleep 1 is over...
sleep 2 is over...
sleep 3 is over...
on load callback...
sleep 1 is over...
sleep 2 is over...
sleep 3 is over...
on load callback...
sleep 1 is over...
sleep 2 is over...
sleep 3 is over...
on load callback...
sleep 1 is over...
sleep 2 is over...
sleep 3 is over...

任何帮助都将不胜感激。

我可以理解，当一个“睡眠”运行时，下载会被阻塞，但我不能理解的是为什么它在继续下载剩余的文件之前运行所有的“睡眠1”、“睡眠2”和“睡眠3”。

====编辑====

我使用"promisified“XMLHttpRequest和Promise.all()加载文件。(http://www.html5rocks.com/en/tutorials/es6/promises/)

最好的，尼古拉斯

Answer 1

我想您在这里问的问题是，为什么所有.then()函数都优先于JS事件循环中的onload事件？

它们是这样做的，这是因为承诺运行在一个与主任务队列分离的微任务队列上，并在后者之前耗尽。

另见this answer to another question。