Вивчайте Вступ до асинхронного JavaScript | Асинхронний JavaScript та Інтеграція API

Що таке асинхронне програмування?

Асинхронне програмування дозволяє виконувати операції без блокування коду. На відміну від синхронного програмування, де кожна операція чекає завершення попередньої, асинхронне програмування дає змогу іншим завданням виконуватися без очікування завершення попереднього.

Це особливо важливо у веб-розробці, де часто потрібно виконувати тривалі операції, наприклад, отримувати дані з API, чекати на введення користувача або встановлювати таймери.

Уявімо, що ми розробляємо програму, де 1 і 2 — це серверні запити, а 3, 4 і 5 — інші операції, наприклад, обробка взаємодії з користувачем.

У синхронній моделі завдання 1 і 2 блокують виконання 3, 4 і 5 до завершення. Наприклад, якщо користувач залишає коментар (1) і потім намагається відкрити бічну панель (3), інтерфейс «зависає», доки коментар не буде оброблено, що призводить до затримок.

В асинхронній моделі серверні запити (1 і 2) не блокують програму. Поки очікується відповідь, програма продовжує виконувати інші завдання (3, 4 і 5). Це дозволяє користувачу взаємодіяти з бічною панеллю одразу після відправлення коментаря, підвищуючи чутливість інтерфейсу.

Відмінності між синхронною та асинхронною поведінкою

Синхронне програмування

У синхронному програмуванні завдання виконуються одне за одним. Кожне завдання повинно завершитися, перш ніж почнеться наступне. Якщо одне із завдань виконується довго (наприклад, завантаження великого файлу), воно блокує всі наступні завдання, що може зробити застосунок не реагуючим.


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

У цьому прикладі Завдання 2 виконається лише після завершення довготривалого завдання (циклу). Це блокує виконання коду та може призвести до зависання браузера.

Асинхронне програмування

В асинхронному програмуванні завдання можуть бути ініційовані та виконані пізніше без блокування іншого коду. Це дозволяє іншим завданням продовжувати виконання під час очікування завершення довготривалих операцій (наприклад, отримання даних). Такий підхід гарантує, що завдання, як-от мережеві запити або таймери, не зупиняють виконання інших операцій вашого застосунку.

index.html

index.css

index.js

У цьому прикладі Завдання 1 виконується негайно, Завдання 3 також виконується негайно, а Завдання 2 виконується через 2 секунди. Асинхронна поведінка дозволяє програмі продовжувати роботу, не чекаючи завершення Завдання 2.

Приклади асинхронних операцій у реальному світі

Отримання даних з API

Однією з найпоширеніших асинхронних операцій у JavaScript є отримання даних з віддаленого сервера за допомогою API. JavaScript надсилає запит до API, але решта коду продовжує виконуватись, не чекаючи відповіді сервера. Коли дані стають доступними, вони обробляються за допомогою callback-функції або promise.

index.html

index.js

Синхронний код: Абзац з id="syncMessage" демонструє, що синхронний код виконується одразу після запуску асинхронного запиту fetch. Це показує, що програма не призупиняється під час очікування даних з API;
Асинхронний fetch: Після отримання даних абзац з id="apiOutput" оновлюється, демонструючи завершення асинхронного завдання.

Таймери (setTimeout та setInterval)

Функції JavaScript setTimeout() та setInterval() часто використовуються для планування виконання завдань із затримкою або через певні інтервали часу. Ці функції не блокують виконання іншого коду. Завдання, які вони викликають, виконуються після вказаної затримки або інтервалу, поки решта коду продовжує виконуватись.

index.html

index.js

Синхронний код: Абзац з id="syncMessage" оновлюється негайно, демонструючи, що синхронна частина коду виконується без очікування таймера;
Асинхронний таймер: Через 3 секунди зворотний виклик setTimeout() завершується й оновлює абзац з id="timerOutput", щоб показати, що таймер завершився.

Обробка подій введення користувача

JavaScript асинхронно очікує настання подій без блокування іншого коду під час взаємодії з користувачем (наприклад, натискання, надсилання форм або натискання клавіш). Слухачі подій є неблокуючими, тобто решта програми може продовжувати виконання під час очікування введення користувача.

index.html

index.js

Синхронний код: Абзац з id="syncMessage" демонструє, що синхронний код виконується одразу після встановлення обробника подій. Він не очікує, поки користувач натисне кнопку;
Асинхронна обробка подій: Обробник події кнопки спрацьовує, коли користувач натискає, оновлюючи абзац з id="eventOutput".

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 1

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.22

Свайпніть щоб показати меню

Що таке асинхронне програмування?

Відмінності між синхронною та асинхронною поведінкою

Синхронне програмування


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

Асинхронне програмування

index.html

index.css

index.js

Приклади асинхронних операцій у реальному світі

Отримання даних з API

index.html

index.js

Синхронний код: Абзац з id="syncMessage" демонструє, що синхронний код виконується одразу після запуску асинхронного запиту fetch. Це показує, що програма не призупиняється під час очікування даних з API;
Асинхронний fetch: Після отримання даних абзац з id="apiOutput" оновлюється, демонструючи завершення асинхронного завдання.

Таймери (setTimeout та setInterval)

index.html

index.js

Синхронний код: Абзац з id="syncMessage" оновлюється негайно, демонструючи, що синхронна частина коду виконується без очікування таймера;
Асинхронний таймер: Через 3 секунди зворотний виклик setTimeout() завершується й оновлює абзац з id="timerOutput", щоб показати, що таймер завершився.

Обробка подій введення користувача

index.html

index.js

Синхронний код: Абзац з id="syncMessage" демонструє, що синхронний код виконується одразу після встановлення обробника подій. Він не очікує, поки користувач натисне кнопку;
Асинхронна обробка подій: Обробник події кнопки спрацьовує, коли користувач натискає, оновлюючи абзац з id="eventOutput".

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 1