Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить requestIdleCallback()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

```javascript
requestIdleCallback(callback, [options])
```

Ця функція **реєструє колбек**, який буде викликаний **тоді**, коли **браузер не зайнятий відмальовуванням або обробкою подій**, тобто *у простої* ("idle time").

---

## Що це означає

Браузер малює кадри приблизно 60 разів на секунду (кожні ~16.6 мс). Якщо якийсь кадр зайняв лише, скажімо, 10 мс, то в браузера залишається **~6 мс вільного часу**, саме туди може потрапити твій `requestIdleCallback`.

Таким чином, ти можеш виконувати **незначні або фонові завдання**, які не критичні до часу, **без гальмувань інтерфейсу**.

---

## Приклад

```javascript
requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0) {
    console.log('Виконуємо фонове завдання');
  }
  console.log('Браузер знову зайнятий - чекаємо наступного простою');
});
```

Тут:

- `deadline` - спеціальний об'єкт, що передається в колбек,
- `deadline.timeRemaining()` показує, скільки мілісекунд "вільно" до наступного кадру,
- ти можеш виконувати роботу **поки є час**, а якщо не встиг - браузер викличе колбек знову в наступному "вікні простою".

---

## Як працює крок за кроком

1. Ти викликаєш `requestIdleCallback(fn)`
2. Браузер додає `fn` до **черги завдань "idle callbacks"**
3. Коли Event Loop, відмальовування і мікротаски завершені, і до наступного кадру залишається час, браузер викликає твій колбек
4. Якщо вкладка не активна або часу немає - колбек може відкладатися

---

## Аргументи функції

```javascript
requestIdleCallback(callback, { timeout: 2000 })
```

- `callback(deadline)` - функція, яка отримає об'єкт:
  - `deadline.timeRemaining()` - скільки мілісекунд лишилося "до зайнятості";
  - `deadline.didTimeout` - `true`, якщо таймаут минув і колбек викликали "примусово".
- `options.timeout` - максимальний час очікування (якщо немає вільного моменту - колбек все одно виконається через заданий час).

---

## Приклад з розбиттям важкої роботи

```javascript
const tasks = Array.from({ length: 10000 }, (_, i) => i);

function processTasks(deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    const task = tasks.shift();
    // виконуємо частину роботи
    console.log('Оброблено задачу', task);
  }

if (tasks.length > 0) {
    requestIdleCallback(processTasks);
  }
}

requestIdleCallback(processTasks);
```

Такий підхід дає змогу **обробляти тисячі елементів** без лагів: UI залишається відгукливим, тому що робота виконується **у паузах між кадрами**.

---

## Відмінність від setTimeout і requestAnimationFrame

| Критерій | `setTimeout` | `requestAnimationFrame` | `requestIdleCallback` |
|---|---|---|---|
| Мета | Виконати через N мс | Виконати **перед** перемальовуванням кадру | Виконати **у паузі між кадрами** |
| Пріоритет | Середній | Високий (для анімацій) | Низький (фонові завдання) |
| Залежить від навантаження | Ні | Так, синхронізується з кадром | Так, викликається лише якщо браузер вільний |
| При неактивній вкладці | Може троттлитися | Призупиняється | Може затримуватися надовго |
| Використання | Таймери, затримки | Анімації, плавні оновлення | Легкі фонові обчислення, кеш, логіка завантаження |

---

## Важливо знати

- `requestIdleCallback` - **є не в усіх браузерах** (наприклад, немає в Safari). Краще мати **фолбек**:

```javascript
  const ric = window.requestIdleCallback || function (cb) {
    return setTimeout(() => cb({ timeRemaining: () => 0, didTimeout: true }), 1);
  };
  ```
- Його **не можна використовувати для критичних завдань**, оскільки він може не викликатися довго (якщо вкладка навантажена).

---

## Підсумок

| Властивість | Значення |
|---|---|
| **Що робить** | Викликає колбек, коли в браузера є вільний час |
| **Передає об'єкт** | `deadline` з `timeRemaining()` і `didTimeout` |
| **Коли виконується** | У "вікнах простою" між кадрами |
| **Використовується для** | Фонових завдань, кешування, підвантаження даних |
| **Скасовується через** | `cancelIdleCallback(id)` |
| **Повертає** | Числовий ID, як у таймерів |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати550 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.