🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Какие проблемы решает eventloop?
Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него.
🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи
JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы.
Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.
console.log("1: Перед запросом");
setTimeout(() => {
console.log("2: Данные загружены");
}, 2000);
console.log("3: После запроса");
Вывод в консоль
1: Перед запросом
3: После запроса
2: Данные загружены (спустя 2 секунды)
🚩Обработка пользовательских событий без зависаний
Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция.
Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.
document.querySelector("button").addEventListener("click", () => {
console.log("Кнопка нажата!");
});
🚩Загрузка данных без блокировки страницы
Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа.
Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.
console.log("Запрос данных...");
fetch("Ссылка скрыта
.then(response => response.json())
.then(data => console.log("Данные получены:", data));
console.log("Код выполняется дальше!");
Вывод
Запрос данных...
Код выполняется дальше!
(Спустя время) Данные получены: {id: 1, title: "..."}
🚩Обход блокировки в тяжёлых вычислениях
Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет.
Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.
let count = 0;
function heavyTask() {
for (let i = 0; i < 1e6; i++) {
count++;
}
console.log("Часть работы выполнена!");
if (count < 5e6) {
setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
}
}
heavyTask();
Ставь 👍 и забирай 📚 Базу знаний