47 lines
2.9 KiB
Markdown
47 lines
2.9 KiB
Markdown
---
|
||
sidebar_position: 1
|
||
---
|
||
|
||
# Введение: колбэки
|
||
|
||
Асинхронное программирование с использованием callback-функций в JavaScript — это один из традиционных подходов для работы с асинхронными операциями, такими как чтение файлов, запросы к серверу или таймеры. Callback-функция передается в качестве аргумента в асинхронную функцию и вызывается после завершения этой операции.
|
||
|
||
Вот пример асинхронного программирования с использованием callback:
|
||
```js
|
||
// Пример асинхронной функции, которая имитирует запрос к серверу
|
||
function fetchData(callback) {
|
||
// Имитируем задержку с помощью setTimeout
|
||
setTimeout(() => {
|
||
const data = { name: "John", age: 30 };
|
||
// Вызываем callback-функцию и передаем ей данные
|
||
callback(data);
|
||
}, 2000); // Задержка 2 секунды
|
||
}
|
||
|
||
// Callback-функция, которая будет вызвана после получения данных
|
||
function handleData(data) {
|
||
console.log("Данные получены:", data);
|
||
}
|
||
|
||
// Вызов асинхронной функции с передачей callback
|
||
fetchData(handleData);
|
||
|
||
console.log("Ожидание данных...");
|
||
```
|
||
|
||
Объяснение:
|
||
1. **fetchData** — это асинхронная функция, которая имитирует запрос к серверу с задержкой в 2 секунды.
|
||
2. **callback** — это функция, которая передается в `fetchData` и будет вызвана после завершения асинхронной операции.
|
||
3. **handleData** — это callback-функция, которая обрабатывает полученные данные.
|
||
4. **setTimeout** используется для имитации задержки, как будто данные загружаются с сервера.
|
||
|
||
Вывод в консоль:
|
||
```
|
||
Ожидание данных...
|
||
Данные получены: { name: "John", age: 30 }
|
||
```
|
||
Особенности:
|
||
- Callback-функции могут привести к так называемому "callback hell" (ад колбэков), когда много асинхронных операций вложены друг в друга, что делает код сложным для чтения и поддержки.
|
||
- В современных JavaScript-проектах вместо callback-функций часто используют Promises или async/await для более удобной работы с асинхронным кодом.
|
||
|
||
🚀 **Источник Deepseek** |