Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как работает alert? (https://javascript.ru/forum/events/74726-kak-rabotaet-alert.html)

kvizor34 03.08.2018 14:07

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

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

p.s. догадываюсь о том что нужно использовать callback, вот только не знаю как именно.

j0hnik 03.08.2018 14:39

вариант, не использовать алерт, использовать console.log

kvizor34 03.08.2018 14:46

Я это уже понял, у меня нет конкретной задачи использовать алерт, просто когда столкнулся с этим, возник вопрос "как так почему зачем". мне очень нужно знать, кто нибудь может объяснить на пальцах? или хотя-бы дать почву к размышлению

j0hnik 03.08.2018 14:50

на пальцах, алерт больше исключение, чем правило.

Dilettante_Pro 03.08.2018 14:53

<body>

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

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

MallSerg 03.08.2018 15:19

Цитата:

Я что-то слышал об "асинхронности" в JS, но почему здесь срабатывает сначала alert а потом остальной код? и можно-ли ситуацию исправить?
Твое мнение наивно и ошибочно. алерт не срабатывает раньше

Alexandroppolus 03.08.2018 19:07

kvizor34,

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

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

Цитата:

Сообщение от Dilettante_Pro (Сообщение 491703)
<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", то элемент опять потеряется, потому что алерт будет вызван хоть и асинхронно, но наиболее приоритетно (в микротаске), т.е. опять же перед отрисовкой.

SuperZen 03.08.2018 20:32

предлагаю посмотреть %)
https://www.youtube.com/watch?v=QyUFheng6J0

Aetae 03.08.2018 20:53

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

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


Часовой пояс GMT +3, время: 12:14.