Javascript — асинхронный язык. Означает ли это, что мой код может выполниться «неправильно»?

Question

[sorry_i_noob]

Javascript - асинхронный язык, то есть, в нем невозможно предсказать, какие функции в каком порядке будут вызваны.
Может ли произойти такая ситуация, что мой код выполнится "неправильно"? То есть, не
так, как я ожидаю.

Допустим, есть такой код.

let $some_elem = $('.some_elem');
$some_elem.addClass('some_class');
$('.some_class').remove();

Да, этот код можно написать иначе - чтобы избежать того вопроса, который я здесь задаю. Но меня интересует не код, а сам вопрос, код здесь только для примера.

Может ли случиться такое, что сначала выполнится $('.some_class').remove();, а только потом $some_elem.addClass('some_class');? Если нет, то как понять, когда использовать callback'и, а когда - нет?

Comments

[WapSter]

справочники и документация указывает, когда использовать callback. Если бы никто не знал какая функция будет выполнятся, на этом языке не писали бы программы.

Answer 1

[Сергей Соколов]

Операции выполняются последовательно.

Некоторые известные программисту выражения могут откладывать асинхронные личинки )
При этом сами выражения выполняются синхронно-последовательно и тут же за ними выполняются следующие строки. Но личинка асинхронности отложена и зреет! )

let $some_elem = $('.some_elem');          // 1
$some_elem.addClass('some_class');         // 2
setTimeout(() => alert("Созрели!"), 1000); // 3 отложили
$('.some_class').remove();                 // 4
// этот код выполнился до конца и, казалось бы, делать больше нечего.

// ...через секунду сработал alert

Тут setTimeout() отрабатывает мгновенно-синхронно - его функция отложить личинку на через-секунду. Представьте, что setTimeout пушит функцию и её время в некий невидимый служебный массив движка JS. А движок заглядывает в этот массив по 100 раз в секунду, когда свободен, не занят выполнением кода, и смотрит, «есть чё?», что пора выполнить?

Сразу за отработавшим setTimeout() (но никакого alert ещё не случилось) выполняется следующая строка $('.some_class').remove();

Подробнее читайте про event loop.

Comments

[Lynn «Кофеман»]

Асинхронные личинки!!!!1111

[sorry_i_noob]

Спасибо, прикольное объяснение :-) .

А движок заглядывает в этот массив по 100 раз в секунду

100 - цифра взята с потолка или правда именно 100?

[Сергей Соколов]

sorry_i_noob, с потолка

[Анатолий Куликов]

Сергей Соколов, я с вашего разрешения ответ заскриню, он шикарен))

Answer 2

[Дмитрий]

javascript - 100% синхронный язык, пока вы не вызываете асинхронные функции, такие как SetTimeout, setInterval или Promise. Но даже порядок выполнения асинхронных функций, точнее порядок их запуска, предсказуем. В вашем случае все естественно будет выполняться в том порядке как написано, иначе это было бы полнейшим абсурдом.