Question

我想通过我的承诺更新DOM。我构建了一个promises数组并使用Promise.all运行它们：

/^\d{1,2}\.\d{1,2}(am|pm)-\d{1,2}\.\d{1,2}(am|pm)$/i

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

我无法实时更新DOM。只有在我的所有承诺都得到解决后，它才会更新DOM。

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

我想使用promises而不是“setTimeout（function，1000）”hack但是我找不到好的方法来做它。

Answer 1

在浏览器中，DOM会对更改进行排队，如果它们连续发生而主事件队列没有像for循环一样的“免费滴答”，那么当JS操作DOM时，它们将立即应用完了。请参阅：https://stackoverflow.com/a/31229816/1207049

要在浏览器环境中克服这个问题，您可以使用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

1 个答案: