为什么追加子级异步工作

Question

在下面的代码中，div.appendChild(img)不在函数reader.onload函数中，该函数是一个异步处理程序，即仅在读取文件数据完成时运行。这意味着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将已经存在，并且您以相同的结果结束。