Привет. Кто-нибудь может ответить на несколько вопросов, касающихся асинхронности в JS и event loop в частности?

https://habr.com/company/ruvds/blog/340508/ тут в картинках вроде доходчиво

https://habr.com/company/ruvds/blog/340508/ тут в картинках вроде доходчиво

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

Ну вы вопрос пишите тут, кто-то да может и ответит =)

Ну первый вопрос о том, поочередно ли выполняются задачи из цикла событий?

А кто занимается вызовом коллбэков, когда вызываются события? Это цикл событий помнит при каком событии, какие коллбэки нужно выполнить?

Ну первый вопрос о том, поочередно ли выполняются задачи из цикла событий?

И если задачи выполняются поочередно, значит ли это то, что их исполнение, является блокирующим? Конечно, это полезные действия, а действия вроде ожидания ответа от БД следует выполнять асинхронно, пополняя цикл событий, но я имею в виду вот что: Если NodeJS, например, (без модуля cluster) однопоточная, то в то время, когда выполняется функция из цикла событий, JS не может предпринять никаких действий для того, что бы в это время начать выполнять что-то ещё? Он ждет пока функция выполнится до конца, а после этого начинает выполнять следующую функцию в очереди.

Если всё так, то как обеспечивается операции I/O? Например я пишу сервер на NodeJS. Прошу JS слушать порт 80 и обрабатывать данные. И вот приходит первый запрос. Каждый запрос я обрабатываю так: событие запроса.(Парсинг запроса.(вызов к БД.(вывод результата))) То есть при первом запросе очередь цикла событий пуста. Шаг 1. Случается событие запроса и очередь пополняется первым коллбэком (Парсинг запроса). На сколько я понимаю, дальше event loop (el в будущем) проверяет есть ли что-нибудь в очереди и если есть - выполняет, а выполняет он в данном случае тот самый коллбэк "Парсинг запроса". Шаг 2. Во время выполнения первого коллбэка, очередь пополняется вторым коллбэком (вызов к БД), а перед исполнением конечно из очереди убирается выполняемое событие. Шаг 3. JS проверяет очередь и приступает к исполнению второго коллбэка. В его теле делается асинхронный запрос к БД. При получении ответа - должен быть вызван третий коллбэк "вывод результата". Значит имя события и коллбэк добавляются в очередь. Тут у меня возникает вопрос. Кто отвечает за вызов события о получении данных из БД? И что, если во время любого из этих шагов появится новый запрос?

Всем привет подскажите как мне впихнуть url во фрейм. <frameset rows="100%"> <frame src="" frameborder="0" noresize="noresize"> </frameset>

Если всё так, то как обеспечивается операции I/O? Например я пишу сервер на NodeJS. Прошу JS слушать порт 80 и обрабатывать данные. И вот приходит первый запрос. Каждый запрос я обрабатываю так: событие запроса.(Парсинг запроса.(вызов к БД.(вывод результата))) То есть при первом запросе очередь цикла событий пуста. Шаг 1. Случается событие запроса и очередь пополняется первым коллбэком (Парсинг запроса). На сколько я понимаю, дальше event loop (el в будущем) проверяет есть ли что-нибудь в очереди и если есть - выполняет, а выполняет он в данном случае тот самый коллбэк "Парсинг запроса". Шаг 2. Во время выполнения первого коллбэка, очередь пополняется вторым коллбэком (вызов к БД), а перед исполнением конечно из очереди убирается выполняемое событие. Шаг 3. JS проверяет очередь и приступает к исполнению второго коллбэка. В его теле делается асинхронный запрос к БД. При получении ответа - должен быть вызван третий коллбэк "вывод результата". Значит имя события и коллбэк добавляются в очередь. Тут у меня возникает вопрос. Кто отвечает за вызов события о получении данных из БД? И что, если во время любого из этих шагов появится новый запрос?

Event Loop в NodeJS ничего не выполняет сам по себе, насколько мне известно

Он делегирует эту работу другим подсистемам (файловой, БД, сетевой и т.д.). Когда работа заканчивается, источник вызывает этот самый callback с результатом. Event Loop это видит и передает результат интерпретатору Javascript.

Если всё так, то как обеспечивается операции I/O? Например я пишу сервер на NodeJS. Прошу JS слушать порт 80 и обрабатывать данные. И вот приходит первый запрос. Каждый запрос я обрабатываю так: событие запроса.(Парсинг запроса.(вызов к БД.(вывод результата))) То есть при первом запросе очередь цикла событий пуста. Шаг 1. Случается событие запроса и очередь пополняется первым коллбэком (Парсинг запроса). На сколько я понимаю, дальше event loop (el в будущем) проверяет есть ли что-нибудь в очереди и если есть - выполняет, а выполняет он в данном случае тот самый коллбэк "Парсинг запроса". Шаг 2. Во время выполнения первого коллбэка, очередь пополняется вторым коллбэком (вызов к БД), а перед исполнением конечно из очереди убирается выполняемое событие. Шаг 3. JS проверяет очередь и приступает к исполнению второго коллбэка. В его теле делается асинхронный запрос к БД. При получении ответа - должен быть вызван третий коллбэк "вывод результата". Значит имя события и коллбэк добавляются в очередь. Тут у меня возникает вопрос. Кто отвечает за вызов события о получении данных из БД? И что, если во время любого из этих шагов появится новый запрос?

http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

по поводу конкретно вопроса "Кто отвечает за вызов события о получении данных из БД?", я не знаю. Скорее всего сама БД уведомляет, а там уже nodejs-адаптер (с низкоуровневыми биндингами) принимает

Он делегирует эту работу другим подсистемам (файловой, БД, сетевой и т.д.). Когда работа заканчивается, источник вызывает этот самый callback с результатом. Event Loop это видит и передает результат интерпретатору Javascript.

Тут ведь речь о адапторе? Ну то есть event loop хранит в своём представлении js callback, а при вызове драйвера БД, говорит куда обратиться, когда запрос будет выполнен и в момент обращения пополняет очередь вызовов js коллбэком из памяти и при его вызове передает данные?

да!

мне этого представления хватило на долгие годы) дальше я пока не лез

этот цикл событий - легковесная штука в плане задач сам интерпретатор JS на тяжелых задачах тупит, поэтому даже шифрование типа bcrypt делегируется C/C++

то есть JS-интерпретатор - это скоросшиватель цикл событий - секретарь всю тяжелую работу делает "аутсорс"

Благодаря этому разделению и неблокирующей архитектуре цикла событий, мы имеем хорошую производительность

этот цикл событий - легковесная штука в плане задач сам интерпретатор JS на тяжелых задачах тупит, поэтому даже шифрование типа bcrypt делегируется C/C++

что бы делегировать нативному модулю не обязательно быть асинхронным

да, точно, спасибо за замечание

Кстати, вот на схеме опрос I/O, сейчас пойду читать и есть после этого, а потом вернусь. Но перед этим вопрос - это действие и есть получение информации о статусе? Статусе чтения файла, запроса к БД, рендера картинки, вычисления психологического размера члена и т.д. https://habrastorage.org/getpro/habr/post_images/752/be5/35f/752be535f3ef3f5e0e531e77fc67757a.png

Народ, привет всем! Как реализовать отлов события ajaxSuccess без использования jQuery?

Тут ведь речь о адапторе? Ну то есть event loop хранит в своём представлении js callback, а при вызове драйвера БД, говорит куда обратиться, когда запрос будет выполнен и в момент обращения пополняет очередь вызовов js коллбэком из памяти и при его вызове передает данные?

Другой человек говорит что по его мнению, это Event Loop опрашивает драйвера устройств в каждой итерации

Народ, привет всем! Как реализовать отлов события ajaxSuccess без использования jQuery?

Возможно addEventListener

Возможно addEventListener

Но на какое событие?

не обнаружил

Но на какое событие?

"ajaxSuccess" target.addEventListener('ajaxSuccess', callback)

"ajaxSuccess" target.addEventListener('ajaxSuccess', callback)

Чет мне подсказывает, что в JS такого нету

Чет мне подсказывает, что в JS такого нету

target нужно заменить на элемент, на котором должно возникнуть это событие

target нужно заменить на элемент, на котором должно возникнуть это событие

Я в принципе про event. Его не существует: https://developer.mozilla.org/en-US/docs/Web/Events

target нужно заменить на элемент, на котором должно возникнуть это событие

нет такого события за пределами jquery

Ну вот

Я о чем

Народ, привет всем! Как реализовать отлов события ajaxSuccess без использования jQuery?

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

да, эт клево, знаю, но мне нужно не на мои события

что значит не на мои события?

Другой человек говорит что по его мнению, это Event Loop опрашивает драйвера устройств в каждой итерации

глубоко технически я не знаю) к сожалению передо мной не стояло такой задачи, да и я скорее всего забыл бы, если бы прочитал когда-то

поэтому я абстрагировался от конкретики

что значит не на мои события?

мне вот тоже интересно

что значит не на мои события?

Я имею в виду, что у меня нет элемента, на котором будет что-то происходить. Нужно ловить все AJAX'ы в document. Как если бы было document.ajaxSuccess(...)

Если другой скрипт что-то куда-то запрашивает - я должен об этом знать

Я имею в виду, что у меня нет элемента, на котором будет что-то происходить. Нужно ловить все AJAX'ы в document. Как если бы было document.ajaxSuccess(...)

имеется в виду перехватить что возвращает из аякс запросов чужой код?

имеется в виду перехватить что возвращает из аякс запросов чужой код?

Не обязательно даже перехватывать. Просто должен знать, что, например, был вызван GET cart.js успешно

Не обязательно даже перехватывать. Просто должен знать, что, например, был вызван GET cart.js успешно

если нет доступа к коду который делает вызов, то никак

аааа

думаю, никак

Ну Жквери как-то это ж делает

не уверен

Ну Жквери как-то это ж делает

пример кода

$itg(document).ajaxSuccess(function(a, b, c) { if (c.url.indexOf('/cart/add.js') !== -1 || c.url.indexOf('/cart/change.js') !== -1 || c.url === '/cart.js' || c.url === '/cart/update.js') { itg_fsb_check_cart() } })

jQuery - просто обертка над XMLHttpRequest

хм

$itg(document).ajaxSuccess(function(a, b, c) { if (c.url.indexOf('/cart/add.js') !== -1 || c.url.indexOf('/cart/change.js') !== -1 || c.url === '/cart.js' || c.url === '/cart/update.js') { itg_fsb_check_cart() } })

если ты вызовешь аякс запрос нативно, а не через jq то этот код его не перехватит

О как

Я понял, спасибо

Выходит он ловит только те события, которые сам и создает

Тогда все логично

конечно, он их сам создает и сам ловит, просто в другом месте

ну в принципе тут "трава подстелена" для того, чтобы удобно вешать дополнительные слушатели на предмет сетевото ответа важно понимать, что тут вызов зарегистрирован глобально

это скорее особый случай

ERROR: S client not available

если сама процедура запроса запрятана где-то в коде (не привязана ни к чему, неглобальна), то к ней никак не получишь

коротко говоря вопрос в следующем

jq просто эталон говеного кода

"есть ли у тебя доступ к контексту вызова, или нет"

jq просто эталон говеного кода

да, по сути проблема чисто архитектурная

слушай

конечно, он их сам создает и сам ловит, просто в другом месте

Я к чему это спрашиваю вообще. Есть магазины и у них есть темки. В зависимости от темы в корзину товар добавляется либо аяксом, либо запросом по клику на кнопку (кнопкой может быть все ( input, span, button)). И вот мне нужно ловить события добавления в корзину

Повесить хэндлеры на все элементы - это изврат

а что происходит после основного запроса (из чужого скрипта)

Я к чему это спрашиваю вообще. Есть магазины и у них есть темки. В зависимости от темы в корзину товар добавляется либо аяксом, либо запросом по клику на кнопку (кнопкой может быть все ( input, span, button)). И вот мне нужно ловить события добавления в корзину

как вообще может быть связана тема и способ добавления товара в корзину?

он должен оставлять "следы"

не надо такой софт использовать )

то есть может тебе отследить не сам запрос, а факт его выполнения (например, html обновился как-то)

не надо такой софт использовать )

ну что поделать) у человека сейчас нет другого выбора

я помню как сам шастал по форумам, и мне говорили "тебе надо все переписывать"

как вообще может быть связана тема и способ добавления товара в корзину?

Shopify. Там темы довольно масштабный кусок магазина

а что происходит после основного запроса (из чужого скрипта)

Да всякое, в зависимости от темы

В этом и беда, я не знаю когда и откуда что вызовется, и поэтому должен ловить все

Я к чему это спрашиваю вообще. Есть магазины и у них есть темки. В зависимости от темы в корзину товар добавляется либо аяксом, либо запросом по клику на кнопку (кнопкой может быть все ( input, span, button)). И вот мне нужно ловить события добавления в корзину

https://github.com/jpillora/xhook гугл всему голова ёпты

Если неохота либу цеплять, декорируй XMLHttpRequest

Огонь, это мысль. Спасибо

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send = function (value) { this.addEventListener('progress', () => { console.log("Loading"); }, false); this.realSend(value); };

Это ж жс, воруй-убивай.

Это ж жс, воруй-убивай.

?

как создать массив от 1 до n ?

как создать массив от 1 до n ?

'x'.repeat(10).split('')

https://github.com/jpillora/xhook гугл всему голова ёпты

Спасибо большое за наводку. Возьму на заметку на всякий случай

А что значит от 1? О_о

Не пиши ничего в head и всё.

ему нужен range походу

как создать массив от 1 до n ?

Array(n).fill('').map((e, i) => i)