Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2018, 14:07
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Как работает alert?
elem = document.createElement('p');
document.body.appendChild(elem);
alert('1');

Я что-то слышал об "асинхронности" в JS, но почему здесь срабатывает сначала alert а потом остальной код? и можно-ли ситуацию исправить?
Ссылка с примером в JSFiddle - http://jsfiddle.net/kvizor/ghj3nxLq/3/

p.s. догадываюсь о том что нужно использовать callback, вот только не знаю как именно.
Ответить с цитированием
  #2 (permalink)  
Старый 03.08.2018, 14:39
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

вариант, не использовать алерт, использовать console.log
Ответить с цитированием
  #3 (permalink)  
Старый 03.08.2018, 14:46
Аватар для kvizor34
Аспирант
Отправить личное сообщение для kvizor34 Посмотреть профиль Найти все сообщения от kvizor34
 
Регистрация: 08.02.2018
Сообщений: 50

Я это уже понял, у меня нет конкретной задачи использовать алерт, просто когда столкнулся с этим, возник вопрос "как так почему зачем". мне очень нужно знать, кто нибудь может объяснить на пальцах? или хотя-бы дать почву к размышлению
Ответить с цитированием
  #4 (permalink)  
Старый 03.08.2018, 14:50
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

на пальцах, алерт больше исключение, чем правило.
Ответить с цитированием
  #5 (permalink)  
Старый 03.08.2018, 14:53
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<body>

</body>
<script>
var elem = document.createElement('p');
elem.textContent = 'textContent';
document.body.appendChild(elem);

setTimeout(function() {
   alert('1');
},100);
</script>

Последний раз редактировалось Dilettante_Pro, 03.08.2018 в 14:58.
Ответить с цитированием
  #6 (permalink)  
Старый 03.08.2018, 15:19
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

Цитата:
Я что-то слышал об "асинхронности" в JS, но почему здесь срабатывает сначала alert а потом остальной код? и можно-ли ситуацию исправить?
Твое мнение наивно и ошибочно. алерт не срабатывает раньше
Ответить с цитированием
  #7 (permalink)  
Старый 03.08.2018, 19:07
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,005

kvizor34,

На самом деле алерт выполняется позже, но он блокирует js. Как следствие, приостанавливается весь event loop, а значит, не происходит перерисовка (она делается не сразу, а отдельным таском в событийном цикле). А так, в DOM-дереве элемент "p" уже есть.

http://jsfiddle.net/alexandroppolus/o34p6gub/ - запусти эту ссылку с открытой консолью. По крайней мере на макбуке в консоли пишется число элементов "p", до закрытия алерта.

Сообщение от Dilettante_Pro Посмотреть сообщение
<body>

</body>
<script>
var elem = document.createElement('p');
elem.textContent = 'textContent';
document.body.appendChild(elem);

setTimeout(function() {
   alert('1');
},100);
</script>
вот здесь алерт вызывается в отдельном таске, уже после перерисовки, и элемент виден.
А если в этом коде заменить "setTimeout" на "Promise.resolve().then", то элемент опять потеряется, потому что алерт будет вызван хоть и асинхронно, но наиболее приоритетно (в микротаске), т.е. опять же перед отрисовкой.

Последний раз редактировалось Alexandroppolus, 03.08.2018 в 19:13.
Ответить с цитированием
  #8 (permalink)  
Старый 03.08.2018, 20:32
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

предлагаю посмотреть %)
https://www.youtube.com/watch?v=QyUFheng6J0
Ответить с цитированием
  #9 (permalink)  
Старый 03.08.2018, 20:53
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

Потому что у тебя хром.
Хром какого-то хрена при вызове alert не запускает предварительно отрисовку накопленных изменений.(что, имхо, нифига не логично)
В фурифоксе такой ереси нет, например.

Способы обойти такое поведения есть(через зад), но они не не нужны, потому как в проде alert юзать нельзя, а для сиюминутных дев нужд овчинка выделки не стоит.
__________________
29375, 35

Последний раз редактировалось Aetae, 03.08.2018 в 20:59.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
опишите, как работает функция Egor1324 AJAX и COMET 5 18.02.2015 08:29
Как работает git merge ixth Оффтопик 3 05.09.2014 14:53
Индексация AJAX сайтов - Как это работает? byFahrenheit AJAX и COMET 4 21.02.2013 17:09
как перехватить виртуальную клавиатуру в android? onkeydown не работает olegdn Events/DOM/Window 2 11.04.2011 17:08
alert!!! как быть с alert???? gooody jQuery 2 19.02.2010 21:44