为什么 appendChild 异步工作

Question

在以下代码中， div.appendChild(img)不在reader.onload function 中，这是一个异步处理程序，即仅在读取文件数据完成时运行。 这意味着在reader.onload事件之外和下方的div.appendChild(img)应该在reader.onload事件完成之前运行，因此本身不应该显示任何内容。

但是，当 onload 事件的处理程序完成时，即读取文件，然后div.appendChild(img)触发，这意味着 appendChild(img) 异步运行。 这是正确的行为吗。 如果不是请更正。

HTML

<input type="file" id="fileInput">   

<div id="demoDiv"></div>

JS

let control = document.getElementById('fileInput') 
let div = document.getElementById('demoDiv') 

control.addEventListener('change', handleFiles)


function handleFiles() {
  let img = document.createElement('img')
  let file = this.files[0]

  let reader = new FileReader(file)
  reader.readAsDataURL(file)
  reader.onload = function() {
    img.src = this.result
  }

  div.appendChild(img)
}

谢谢

Answer 1

这不是同步与否的问题，发生的是img是指向 HTML 元素的指针，如let img = document.createElement('img')中所指定。

当你这样做时：

div.appendChild(img)

您正在将一个元素附加到您的div 。 究竟何时发生并不重要，因为您持有对该元素的引用。 然后，当你这样做时：

img.src = this.result

你改变你创建的元素。 因此，无论操作发生的顺序如何，它们都会正确执行。

如果div.appendChild(img)先发生，则在读取文件时src将发生变异并出现图像。 如果没有，则在附加img时src已经存在，并且您以相同的结果结束。