JavaScript event loop в картинках (часть 1)

Browser events

Какие же события происходят в браузере? Их великое множество:
- клики мышкой;
- скроллинг;
- ввод с клавиатуры;
- загрузка скриптов;
- CSS анимации;
- и тд.

setTimeout()

Можно настроить добавление функции в очередь событий по таймеру, т.е. по прошествии некоторого времени. Это позволяет сделать функция setTimeout():

var timeoutID = scope.setTimeout(function[, delay, param1, param2, …]);
setTimeout(function greet() {
console.log("hey ho");
}, 3000);

Итого

Обработчики назначены, события происходят и попадают в очередь. И обрабатываются в event loop. Вот так схематично (и крайне упрощенно) можно его представить:

while (queue.waitForMessage()) {
queue.processNextMessage();
}

Credits

Ufocoder — Event Loop in the browser Javascript

--

--

Software engineer, punk musician

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store