Я заметил, что в следующем коде:
setTimeout(function(){console.log('setTimeout')});
Promise.resolve(1).then(function(){console.log('promise resolve')})
Независимо от того, сколько раз я выполняю это, функция callback всегда регистрируется перед setTimeout.
Я понимаю, что оба обратных вызова запланированы для следующего тика, и я действительно не понимаю, что происходит, что обещает всегда учитывать предел времени ожидания.
Короткий ответ Обещания имеют больший приоритет, чем функция обратного вызова setTimeout в стеке событий (или как я понимаю).
Длинный ответ смотрите это видео. Очень полезно. Надеюсь это поможет.
https://www.youtube.com/watch?v=8aGhZQkoFbQ
Спасибо @MickJuice за новое и обновленное видео для цикла событий.
Promise.resolve расписывает микрозадачу, а setTimeout назначает макрозадачу. И микрозадания выполняются перед запуском следующей макрозадачи.
setTimeout() имеет минимальную задержку 4 мс, поэтому, хотя вы не указали задержку в своем коде, тайм-аут все равно будет с задержкой не менее 4 мс. Тем временем ваше обещание .then() вызывается.
Таймауты и Promises служат для разных целей.
setTimeout задерживает выполнение блока кода на определенный период времени. Promises - это интерфейс, позволяющий выполнять асинхронное выполнение кода.
Обещание позволяет коду продолжать выполнение, пока вы ждете завершения другого действия. Обычно это сетевой вызов. Таким образом, все, что содержится в вашем вызове then(), будет выполняться после завершения сетевого вызова (или того, что ожидает ожидание). Разница во времени между началом обещания и разрешением обещания полностью зависит от того, что обещание выполняет, и может меняться при каждом выполнении.
Причина, по которой обещание выполняется до истечения таймаута, заключается в том, что обещание фактически не ждет чего-либо, чтобы оно сразу разрешилось.
Тайм-ауты и обещания служат для выполнения кода асинхронным способом, но с различными характеристиками и целями:
setTimeout - задерживает выполнение функции на определенный промежуток времени. - Не блокирует выполнение остального кода (асинхронное поведение) - Они создают Macrotask (внутренняя операция браузера)
Обещания - они являются оболочкой, позволяющей асинхронное выполнение кода (например, вызов ajax). (Не зависит от конкретной длительности). Они особенно полезны для изменения разных асинхронных вызовов. - Не блокирует выполнение остального кода (асинхронное поведение) при меньшем использовании оператора await. - Они создают Microtask (внутренняя операция браузера), которые имеют приоритет над Macrotask.
Рекомендация
Используйте setTimeout, когда вы хотите отложить выполнение функции на определенный промежуток времени и не блокировать выполнение остального кода в процессе
Использовать обещания: когда вы хотите выполнить некоторый асинхронный код и избежать "ада обратного вызова" (да, потому что вы можете делать асинхронные вызовы ajax без обещаний, но синтаксис менее понятен и более подвержен ошибкам)