来自 Promises 的异步更新 DOM

Question

我想通过我的承诺更新 DOM。我建立了一系列承诺，并运行他们 Promise.all:

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 < 9999; i++) {
  loadSequence.push(test(i));
}

Promise.all(loadSequence)
.then(function(){
  window.console.log('all set...');
});

http://codepen.io/nicolasrannou/pen/jbEVwr

我无法实时更新DOM。它只会在我的所有承诺都已解决时更新 DOM。

这是预期的行为吗？如果是这样，我如何利用 Promise.all 实时更新我的 DOM？

我想使用 promises 而不是 "setTimeout(function, 1000)" hack，但我找不到好的方法。

Answer 1

在浏览器中，DOM 队列会发生变化，如果它们连续发生而主事件队列没有一些 "free ticks" 就像您使用 for 循环的情况一样，它们将在一旦 JS 操作 DOM 完成。参见：

为了在浏览器环境中解决这个问题，您可以使用 setTimeout 将代码执行块推送到不同的队列：

function test(i){
  return Promise.resolve()
  .then(function() {

    // update the DOM
    setTimeout(function() {
      document.getElementById('progress').innerHTML += i;
    }, 0);

    return i;
  });
}

没有 setTimeout 更新元素的 innerHTML 的每条指令都被推送到同一队列的末尾。使用 setTimeout，它总是进入一个新的空队列，并且可能在主队列中的项目之前执行。

来自 Promises 的异步更新 DOM

async update DOM from Promises

javascript

dom

asynchronous

es6-promise