为什么我的 JS 代码还在运行，而 DOM 操作还没有完成答案

【问题标题】：Why is my JS code going on, while the DOM manipulation isn't finished为什么我的 JS 代码还在运行，而 DOM 操作还没有完成
【发布时间】：2019-05-14 04:04:16
【问题描述】：

构建一个小文件上传器，我使用类似下面的sn-p。它应该在立即开始上传（此处为警报）之前向我打印所选文件的列表。在 Firefox 中，一切都按预期工作。但是在 Chrome 中，在打印列表之前会触发警报。

为什么会这样？如何强制 JS 等到那里的列表？这里的最佳做法是什么？

document.querySelector("#inputFiles").addEventListener('change', function() {
  var files = this.files;
  var i = 0;
  while (i < files.length) {
    document.querySelector("#filelist").innerHTML += files[i].name + "<br>";
    i++;
  }
  alert("start upload, after list is printed!");
}, false);

<input type="file" id="inputFiles" multiple/>
<div id="filelist"></div>

【问题讨论】：

把alert("start upload, after list is printed!");放在false是

标签： javascript html google-chrome cross-browser

【解决方案1】：

1.因为页面渲染是DOM操作，是事件队列中的Javascript引擎； 2.lert()是窗口的内置函数，被认为是同步CPU代码； 3.javascript引擎会优先执行同步代码，先弹出alert弹窗； 4.lert性质特殊的block，javascript引擎block live的执行；

综合以上原因，导致了离奇的“警报执行顺序问题”。我们无法将页面渲染成同步操作，于是不得不将alert()变成异步代码，你可以在渲染页面后执行。

【讨论】：