Что на самом деле возвращает Web API в tasks queue? Обработанные данные или просто ставит в очередь для отправки в call stack на обработку?

Question

[Maks Hayovets]

Помогите понять что такое Web API, хотелось бы конкретно понять что происходит в Web API после того как например туда попадает какой-то setTimeout? ( просто разберем на примере setTimeout )

К примеру есть какой-то setTimeout с сложной обработкой
( который мог бы затормозить рендер сайта если бы выполнялся в call stack )

в итоге что бы не выполнять это в call stack мы делаем это асинхронно через setTimeout, но насколько я понял то как работает event loop то вся асинхронность будет в том что этот setTimeout выкинет в Web API где он подождет и дальше выкинет в tasks queue где снова его выкинет в call stack но просто в удобное время для самого call stack и как результат эта сложная обработка все равно будет обрабатываться в call stack что собственно затормозит сайт.

Так где же здесь асинхронность?

Или же этот сложный код выполняться в Web API после чего все что он делает это передает этот setTimeout в tasks queue что бы тот в свою очередь передал его в call stack который в свою очередь просто принимает результат?( но это моя догадка, такого я нигде не прочел )

Или же что бы достичь асинхронности мне нужно разбивать этот setTimeout на еще мелкие setTime-аути чтобы те выполнялись быстрее в call stack?

Впрочем объясните пожалуйста где здесь асинхронность или как достичь асинхронности в таком случае?
Думаю для этого мне нужно понять что происходит в Web API, обрабатывается все ли там что туда попадает или оно просто передает это в tasks queue?

Думаю заблуждения у меня на этом моменте или может еще где то.

Answer 1

[Alex Ozerov]

... будет обрабатываться в call stack что собственно затормозит сайт

- затормозит сайт если код выполняется до события DOMContentLoaded,если я вас правильно понял, а таймер закончиться, дальше задача попадет в callback queue и когда дойдет очередь уже в call stack. WebApi - это некий доп.инструмент для js, образно говоря. Так как setTimeout и setinterval в спецификации не описан, js попросту не умеет считать таймер, поэтому этим делом занимается браузер, тоесть WebApi.

Так где же здесь асинхронность?

Все выполнятся в один поток, по очереди, это и есть асинхронность.

Или же что бы достичь асинхронности мне нужно разбивать этот setTimeout на еще мелкие setTime-аути чтобы те выполнялись быстрее в call stack?

- А есть вам нужно отложить или задержать какое-то действие, то да, вам лучше разбить на таймауты все, а еще лучше использовать async await, либо промисы.

Answer 2

[Владимир]

Если есть сложная обработка, то даже в setTimeout, она повесит визуалку, такое лучше выносить в Web Worker
https://developer.mozilla.org/en-US/docs/Web/API/W...

Comments

[Maks Hayovets]

То бишь я верно все понял? Web API это не какой-то другой поток где обрабатываются все что туда заходит и результаты идут в call stack, а все равно все асинхронные действия в конечном итоге обрабатываются в call stack?
И если точнее то вся эта схема event loop это всего лишь просто модель поведения асинхронных действий на одном потоке?

[Владимир]

Макс Данилюк,
https://developer.mozilla.org/en-US/docs/Web/JavaS...
в общих чертах - правильно

[Maks Hayovets]

Владимир, большое спасибо