Как работает асинхронный javascript, в частности setTimeout ?

Question

[Павел Безруков]

Добрый день.
Расскажите пожалуйста как работает setTimeout(function, 0).

Раньше я где-то читал он откладывает выполнение function до конца выполнения функции в которой вызывался,
но сейчас у меня такое чувство что он выполняется после выполнения всего стека действий, независимо в какой функции определён.

(fucntion(){
console.log(1);
setTimeout(function(){console.log(2);},0)
console.log(3);
})()
console.log(4);

вернёт 1,3,4,2.

Хотелось бы чуть больше ясности, возможно теоретики!:)
Заранее большое спасибо!:)

Answer 1

[Сергей Протько]

У вас один процесс/поток (с опереденными допущениям) для выполнения всего этого. В один момент времени может делаться что-то одно (только webworkers могут работать паралельно с основным кодом). Движок JS мультиплексирует выполнение кода.

setTimeout размещает своего рода заявку на отложенный вызов, по сути он ждет ивента что время нужное наступило и только тогда запускает функцию. Пока этот ивент не произошел, выполняется весь нижестоящий код. Если нижестоящий код блокирует выполнение нашего события, то может случиться ситуация при которой событие наступает позже ожидаемого времени. Именно по этому следует избегать подобного кода и все тежелые вычисления ложить в setTimeout/webworkers. Так что вот такой код:

var start = Date.now();
setTimeout(function () {
    console.log('~0 ms should pass, %d ms really pass', Date.now() - start);
}, 0);
while(Date.now() - start < 500) {
    // loop for 0.5 sec
}
console.log('%d ms pass', Date.now() - start);

выведет:

500 ms pass 
~0 ms should pass, 501 ms really pass

Для более глубокого понимания стоит почитать про Event Loop.

Comments

[Сергей Протько]

Так же события связанные с отрисовкой элементов и прочее так же выполняются в том же потоке, так что если вы вставили элемент на страницу и должны дождаться пока он отрисуется - setTimeout то что нужно, ибо раньше чем элемент отрисуется он не вызовет обработчик. Хотя тут я могу наврать, лучше что бы кто-либо подтвердил. Все же сейчас та же компоновка страниц вроде как уже отдельным потоком идет...

Answer 2

[Евгений Петров]

Вот стандарт про event loop, tasks & microtasks.
Можно почитать статью о том, как работают JavaScript таймеры.

Answer 3

[RubaXa]

setTimeout «просто» выполняет функцию через определенный промежуток времени и никак не зависит от контекста исполнения.

Answer 4

[Максим Васильев]

Если вам зачем-то нужно знать порядок выполнения асинхронных вызовов - вы копаете совершенно не в ту сторону.

Comments

[FoxInSox]

Это не ответ, напишите в какую нужно копать, если знаете конечно.

[Максим Васильев]

Смотреть в пересмотр архитектуры приложения и ликвидации зависимости от порядка асинхронных вызовов.

[Евгений Петров]

А setTimeout стал асинхронным?)

[Максим Васильев]

@Petroveg, а он был синхронным?

[Евгений Петров]

@qmax как может быть асинхронным то, что работает в том же event loop?

[Максим Васильев]

@Petroveg, также как и все остальные events в этом loop (ajax и ui)

[Евгений Петров]

@qmax если вы отправите запрос с async:false, то у вас все действия запроса будут синхронными. Если с async:true, то только загрузка будет идти асинхронно.

[Евгений Петров]

@qmax подумал и понял, что в литературе под асинхронностью имеют ввиду просто исполнение кода «когда-нибудь». Для меня это немного странно, но я уже смирился:) Приношу извинения и соглашусь с вашей позицией.

[Максим Васильев]

@Petroveg а как правильно называется исполнение "когда-нибудь"?

[Евгений Петров]

@qmax вот для меня чистый асинхрон — это воркеры. У них свой event loop и они не мешают никому. А когда я выполняю ровно то же, но просто не сразу, то для меня это — просто изменение порядка очереди, которая меньше от этого не станет. Просто некоторые задачи выполнятся раньше.

Кстати, когда отложенные вызовы сравнивают с реализацией hadlers, у меня ощущение, что это сравнение не совсем некорректно. По необходимости и в заранее известный срок — ИМХО слегка разные вещи.

[Павел Безруков]

@Petroveg А подскажите как использовать воркеры, чтобы был фактический асинхрон.
Возможно вы также знаете, насколько уверенно можно использовать setTimeout`ы для выполнения кода вконце evet loop`а, имеется ввиду, сейчас оно работает, так, но ведь могут в будующем переписать реализацию js в браузерах, чтобы была многопоточность?

[Евгений Петров]

@bezrukovPS в конце event loop? Поправьте меня, если я неправ, но это невозможно — это же петля. То есть задачи буду перебираться друг за другом, пока не кончатся. Отложенный вызов — просто желание выполнить код примерно через указанное время. Если в этот момент будет выполняться другая задача, то реальное время задержки будет другим. В статье из моего ответа про это написано.

А воркеры... Идея хорошая, но если кратко, пока от них не так много проку, поскольку грузят всё равно один и тот же процессор. Почитайте каменты к соответствующей статье. Единственный их плюс (и он же минус) — свой event loop, а значит полная изоляция, но и доступа к DOM нет.