Первоначальный вопрос звучал так: "Ванильные запросы DOM javaScript. Как убедиться, что асинхронный код завершился во внешнем интерфейсе, прежде чем продолжить?"
но я изменил заголовок, чтобы он был полезнее для поисковых запросов и показывал, какая информация на самом деле содержится в ответе.
Вы заметите, что, основываясь на предоставленном коде, я думал, что манипуляции с DOM были асинхронными. В ответах указывалось, что это не так.
Если такой код является асинхронным:
let elements = document.querySelectorAll('div');
Тогда как убедиться, что все элементы 'div' были сохранены в переменной 'elements', прежде чем зацикливаться на них?
let elements = document.querySelectorAll('div');
//how do you know that all of the elements will
//have been retrieved in time to run this for loop:
for(let i = 0 ; i < elements.length ; i++) {
let div = elements[i]; console.log(div);
}
Ответ 1 · рейтинг 3 · Community
Если такой код асинхронный
Это не querySelectorAll не асинхронная функция.
как вы убедитесь, что все элементы "div" были сохранены в переменной
Ничего не делать.
Единственная причина, по которой вам может понадобиться подождать, - это если предыдущая функция асинхронно добавляла содержимое в DOM, и в этом случае вам пришлось бы ждать завершения этой функции.
Ответ 2 · рейтинг 2 · RiverOceanSea
Я думаю, что хорошие учителя замечают, в чем заключается недоразумение, и разъясняют его, а не рефлекторно занижают вопросы уровня новичка.
Ранее я думал, что, поскольку DOM представляет собой отдельный интерфейс (т.е. vanilla js взаимодействует с браузером), чтение и запись в него аналогичны чтению и записи в базу данных; и ошибки в моем коде, казалось, вписывались в эту парадигму.
На самом деле сценарии JS выполняются в той же среде, что и DOM, поэтому они не асинхронны. Асинхронные события - это события, которые обычно отправляются в другую среду, а затем возвращаются, выстраиваясь в цикле событий.
Легко понять определение асинхронного события?
https://eloquentjavascript.net/11_async.html