Курс по программированию на JavaScript

Урок 16: Асинхронность в JavaScript

Асинхронность является важной частью программирования на JavaScript. Она позволяет выполнять операции, не блокируя выполнение кода. В этом уроке мы рассмотрим основные концепции асинхронности и функции setTimeout и setInterval.

Обзор асинхронных операций

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

Колбэки

Колбэк-функции — это функции, которые передаются в другую функцию в качестве аргументов и вызываются после завершения асинхронной операции.

// Пример использования колбэков
function fetchData(callback) {
 setTimeout(function() {
 callback('Data received');
 }, 2000);
}

fetchData(function(data) {
 console.log(data); // Data received
});

Data received

В этом примере функция fetchData принимает колбэк и вызывает его после завершения асинхронной операции setTimeout.

Функция setTimeout

Функция setTimeout позволяет выполнить функцию с задержкой.

// Пример использования setTimeout
console.log('Start');
setTimeout(function() {
 console.log('This is printed after 2 seconds');
}, 2000);
console.log('End');

Start
End
This is printed after 2 seconds

В этом примере сообщение "This is printed after 2 seconds" выводится через 2 секунды после вызова setTimeout, не блокируя выполнение других частей кода.

Функция setInterval

Функция setInterval позволяет выполнять функцию повторно с заданным интервалом времени.

// Пример использования setInterval
let count = 0;
let intervalId = setInterval(function() {
 count++;
 console.log(`Interval count: ${count}`);
 if (count === 5) {
 clearInterval(intervalId);
 }
}, 1000);

Interval count: 1
Interval count: 2
Interval count: 3
Interval count: 4
Interval count: 5

В этом примере функция, переданная в setInterval, выполняется каждые 1000 миллисекунд (1 секунду). Когда счетчик достигает 5, интервал очищается с помощью функции clearInterval.

Примеры использования асинхронных функций

Рассмотрим несколько примеров использования асинхронных функций для выполнения различных задач.

// Пример 1: Асинхронное выполнение с использованием setTimeout
function delayedMessage(message, delay) {
 setTimeout(function() {
 console.log(message);
 }, delay);
}

delayedMessage('Hello, after 1 second', 1000);
delayedMessage('Hello, after 2 seconds', 2000);

// Пример 2: Повторяющееся выполнение с использованием setInterval
function startCounter() {
 let counter = 0;
 let intervalId = setInterval(function() {
 counter++;
 console.log(`Counter: ${counter}`);
 if (counter >= 3) {
 clearInterval(intervalId);
 }
 }, 1000);
}

startCounter();

Hello, after 1 second
Hello, after 2 seconds
Counter: 1
Counter: 2
Counter: 3

Упражнения

// Определение функции countdown
function countdown(seconds) {
 let intervalId = setInterval(function() {
 console.log(`Осталось времени: ${seconds} секунд`);
 seconds--;
 if (seconds < 0) {
 clearInterval(intervalId);
 console.log('Время истекло!');
 }
 }, 1000);
}

countdown(5);

Осталось времени: 5 секунд
Осталось времени: 4 секунд
Осталось времени: 3 секунд
Осталось времени: 2 секунд
Осталось времени: 1 секунд
Осталось времени: 0 секунд
Время истекло!

// HTML


// JavaScript
function startClock() {
 let clockElement = document.getElementById('clock');
 setInterval(function() {
 let now = new Date();
 clockElement.textContent = now.toLocaleTimeString();
 }, 1000);
}

startClock();

// Элемент с id "clock" будет обновляться текущим временем каждую секунду