Введение в асинхронность в JavaScript
Асинхронность позволяет выполнять операции, которые занимают время (например, загрузку данных или таймеры), не блокируя основной поток выполнения кода. Это важно, чтобы интерфейс сайта оставался отзывчивым и не «замораживался».
В этом уроке мы рассмотрим три основных способа работы с асинхронным кодом в JavaScript:
setTimeout— запуск кода с задержкой,Promise— объект, который представляет результат асинхронной операции,async/await— современный синтаксис для удобной работы с промисами.
1. setTimeout — выполнение кода с задержкой
Для чего нужно: иногда нужно отложить выполнение функции на определённое время. Например, показать сообщение через 3 секунды.
Пример кода:
setTimeout(() => {
alert("Прошло 3 секунды!");
}, 3000);Что происходит: функция внутри setTimeout выполнится через 3000 миллисекунд (3 секунды).
2. Promise — объект для работы с асинхронностью
Для чего нужно: Promise помогает отследить завершение асинхронной операции и её результат (успех или ошибка).
Пример создания и использования Promise:
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // Можно менять на false для проверки ошибки
if (success) {
resolve("Операция успешна!");
} else {
reject("Произошла ошибка.");
}
}, 2000);
});
myPromise
.then(result => {
console.log(result); // Выведет "Операция успешна!" через 2 секунды
})
.catch(error => {
console.error(error); // Выведет ошибку, если success = false
});Что происходит: создаётся Promise, который через 2 секунды либо выполняется успешно (resolve), либо с ошибкой (reject).
3. async/await — удобный синтаксис для работы с Promise
Для чего нужно: упрощает чтение и написание асинхронного кода, делая его похожим на обычный синхронный.
Пример с async/await:
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function asyncExample() {
console.log("Ждём 2 секунды...");
await wait(2000);
console.log("Прошло 2 секунды!");
}
asyncExample();Что происходит: функция asyncExample ждёт 2 секунды с помощью await, не блокируя остальной код.
Практический пример: таймер обратного отсчёта
Давайте сделаем простой таймер обратного отсчёта с использованием setTimeout и async/await.
<div id="countdown">5</div>
<button id="refreshBtn"><i class="fa fa-refresh"></i></button>
<script>
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function countdown(seconds) {
const display = document.getElementById("countdown");
for(let i = seconds; i >= 0; i--) {
display.textContent = i;
await wait(1000);
}
display.textContent = "Время вышло!";
}
document.getElementById("refreshBtn").addEventListener("click", () => {
location.reload();
});
countdown(5);
</script>Попробуйте прямо здесь:
Совет: Асинхронность — важная тема в JavaScript, не бойтесь экспериментировать и использовать промисы и async/await, чтобы писать чистый и понятный код.
Что дальше
В следующем уроке мы рассмотрим, как с помощью fetch получать данные с сервера и работать с ними.