Почему appendChild работает асинхронно

Question

В следующем коде div.appendChild(img) не находится внутри reader.onload функции, которая является асинхронным обработчиком, т.е. выполняется только после завершения чтения данных файла. Это означает, что div.appendChild(img), находящееся снаружи и ниже события reader.onload, должно было выполняться до завершения события 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, и появится изображение. Если нет, src уже будет присутствовать при добавлении img, и вы закончите с тем же результатом.