Является ли JavaScript в DOM асинхронным или синхронным кодом?

Первоначальный вопрос звучал так: "Ванильные запросы 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);   
}

javascript asynchronous dom synchronous
person RiverOceanSea    schedule 08.02.2018    source источник
comment
Это не асинхронно.   -  person Andrew Li    schedule 09.02.2018
comment
Это не асинхронно, так что нет проблем. Вы имеете в виду, что элементы еще не загружены?   -  person    schedule 09.02.2018
comment
не вижу здесь проблемы... пожалуйста, прочитайте справку по js, прежде чем обращаться сюда за помощью. querySelectorAll не является асинхронным...   -  person Pierre    schedule 09.02.2018
comment
@Pierre, в какой-то документации конкретно указано, является ли querySelectorAll асинхронным или нет? У вас есть ссылка?   -  person Andrew Lohr    schedule 09.02.2018
comment
@AndrewLohr: синхронность является нормой для методов JS. Асинхронные методы странные, поэтому они документируются как таковые.   -  person    schedule 09.02.2018
comment
@Maiya — каждый раз, когда вы взаимодействуете с DOM, это асинхронная операция — это не так. Иногда, когда я запускаю такой код — если у вас есть код, в котором есть проблема, предоставьте минимальный воспроизводимый пример, который на самом деле демонстрирует это, не гадайте о причине проблемы, а затем создайте тестовый пример, который этого не демонстрирует.   -  person Quentin    schedule 09.02.2018
comment
@Maiya: Если вы получаете undefined, значит, ваш счетчик i считает неверные границы.   -  person    schedule 09.02.2018
comment
SkinnyPete Я пытался написать как можно более простой пример. Основываясь на ответе @Quentin ниже, я вижу, что проблема заключалась в следующем: запись в DOM является асинхронной, а запрос DOM - синхронным. Мой исходный код сочетал эти две вещи. В следующий раз я опубликую исходный пример. Спасибо!   -  person RiverOceanSea    schedule 09.02.2018
comment
запись в DOM асинхронна — обычно не бывает!   -  person Quentin    schedule 09.02.2018
comment
@Квентин хорошо, спасибо.   -  person RiverOceanSea    schedule 09.02.2018
comment
@Pierre Я бы хотел, чтобы здесь был раздел, где новички могли бы задавать вопросы, не раздражая некоторых профессионалов. То, что я не смог найти ответ, не означает, что я не искал. Спасибо.   -  person RiverOceanSea    schedule 09.02.2018
comment
@SkinnyPete Спасибо. Нет, я сделал window.onload = function(){}. Я думаю, что мое понимание того, как пишется DOM, еще не верно, так как я думал, что когда вы читаете и записываете в DOM, это было асинхронно.   -  person RiverOceanSea    schedule 09.02.2018
comment
Вы получаете много помощи здесь. Игнорировать голоса. Информация – это то, что имеет значение. Если вы будете быстро реагировать на комментарии и ответы (как это было раньше), у вас будет больше шансов получить персональную помощь.   -  person    schedule 09.02.2018
comment
Этот вопрос является дубликатом, вы можете найти ответ здесь: stackoverflow.com/a/50026257/9314312   -  person Null    schedule 12.04.2019

Ответы (2)


arrow_upward
3
arrow_downward

Если такой код асинхронный

Это не querySelectorAll не асинхронная функция.

как вы убедитесь, что все элементы «div» были сохранены в переменной

Ничего не делать.

Единственная причина, по которой вам может понадобиться подождать, — это если предыдущая функция асинхронно добавляла содержимое в DOM, и в этом случае вам пришлось бы ждать завершения этой функции.

person Community    schedule 08.02.2018
comment
developer.mozilla.org/en-US/docs/ Интернет/API/ - person Haje; 09.02.2018
comment
@Haje — (а) это будет означать, что значение может быть изменено последующим кодом… который не может быть запущен до завершения цикла в вопросе, поэтому это не имеет значения и (б) elementList – это неактивный NodeList объектов-элементов. - person Quentin; 09.02.2018
comment
@Haje спасибо, это помогло мне понять, как хранить элементы DOM в переменной. - person RiverOceanSea; 09.02.2018

arrow_upward
2
arrow_downward

Я думаю, что хорошие учителя замечают, в чем заключается недоразумение, и разъясняют его, а не рефлекторно занижают вопросы уровня новичка.

Ранее я думал, что, поскольку DOM представляет собой отдельный интерфейс (т.е. vanilla js взаимодействует с браузером), чтение и запись в него аналогичны чтению и записи в базу данных; и ошибки в моем коде, казалось, вписывались в эту парадигму.

На самом деле сценарии JS выполняются в той же среде, что и DOM, поэтому они не асинхронны. Асинхронные события — это события, которые обычно отправляются в другую среду, а затем возвращаются, выстраиваясь в цикле событий.

Легко понять определение асинхронного события?

https://eloquentjavascript.net/11_async.html

person RiverOceanSea    schedule 17.08.2019