Question

构建一个小文件上传器，我使用类似以下代码段的内容。在立即开始上传（此处为警告）之前，它应向我显示所选文件的列表。在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>

Answer 1

1。因为页面呈现是DOM操作，所以将是事件队列中的Javascript引擎； 2.lert（）是窗口的内置函数，被认为是同步的CPU代码； 3.javascript引擎将优先执行同步代码，首先弹出警报弹出窗口； 4.忍受了特殊的自然块，实现了javascript引擎块的实时直播；

出于上述原因，导致了怪异的“警报执行顺序问题”。我们无法将页面呈现为同步操作，因此必须提醒（）成为异步代码，您可以在呈现页面后执行该操作。

为什么我的JS代码会继续进行，而DOM操作仍未完成

1 个答案: