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

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

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

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

Контент

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

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

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

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

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

## Що робить `throttle`

**Throttle (троттлінг)** - це техніка, яка **обмежує частоту викликів функції**:
навіть якщо подія відбувається **дуже часто**, функція виконуватиметься **не частіше, ніж раз у заданий інтервал часу**.

Простими словами:

> "Викликай функцію не частіше, ніж **раз у N мілісекунд**."

---

## Приклад без throttle

Припустимо, ти хочеш відстежувати, як користувач рухає мишу:

```javascript
window.addEventListener("mousemove", () => {
  console.log("рух миші");
});
```

Проблема:

- `mousemove` може спрацьовувати **десятки разів на секунду** (до 100-200 разів на секунду!);
- функція буде викликатися занадто часто;
- навантаження на процесор зростає -> страждає продуктивність.

---

## З throttle

```javascript
function throttle(fn, delay) {
  let lastCall = 0;

return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

const handleMove = throttle(() => {
  console.log("Рух миші оброблено!");
}, 500);

window.addEventListener("mousemove", handleMove);
```

Тепер функція `handleMove` буде викликатися **не частіше, ніж 1 раз на 500 мс**,
навіть якщо `mousemove` спрацьовує сотні разів.

---

## Як це працює всередині

1. При першому виклику функція виконується одразу.
2. Зберігається час останнього виклику (`lastCall`).
3. Усі наступні виклики **ігноруються**, поки не мине `delay` мілісекунд.
4. Після тайм-вікна - функція знову може бути викликана.

---

## Відмінність від "debounce"

| Особливість | **Throttle** | **Debounce** |
|---|---|---|
| Мета | Обмежити частоту викликів | Відкласти виконання, поки користувач "не закінчить" |
| Викликається | Регулярно, але не частіше ніж N мс | Тільки один раз після паузи |
| Приклад | `scroll`, `mousemove`, `resize` | `input`, `search`, `autocomplete` |
| Поведінка | "Не частіше ніж" | "Не раніше ніж" |

Приклад:

- **Throttle** - під час скролу сторінки оновлюємо позицію кожні 100 мс.
- **Debounce** - чекаємо, поки користувач закінчить друкувати, і тільки потім робимо запит.

---

## Приклад з реального життя

1. **Оновлення прогрес-бара при скролі:**

```javascript
  window.addEventListener(
    "scroll",
    throttle(() => {
      progressBar.value = window.scrollY;
    }, 100)
  );
  ```
2. **Відстеження позиції миші для анімації:**

```javascript
  window.addEventListener(
    "mousemove",
    throttle(updateCursorPosition, 50)
  );
  ```
3. **Перерахунок розмірів вікна (**`resize`**):**

```javascript
  window.addEventListener(
    "resize",
    throttle(updateLayout, 200)
  );
  ```

---

## Throttle у Lodash

У багатьох проєктах використовують готовий варіант з Lodash:

```javascript
import { throttle } from "lodash";

const throttled = throttle(() => {
  console.log("scroll!");
}, 300);

window.addEventListener("scroll", throttled);
```

Версія Lodash більш просунута -
уміє викликати функцію **на початку і/або в кінці** інтервалу (`leading`, `trailing`).

---

## Підсумок

| Пункт | Опис |
|---|---|
| Що робить | Обмежує частоту виклику функції |
| Коли використовувати | При частих подіях: `scroll`, `resize`, `mousemove` |
| Аргументи | Функція і затримка (мс) |
| Повертає | Нову "обгорнуту" функцію |
| Користь | Знижує навантаження на CPU, підвищує продуктивність |
| Відмінність від debounce | Виконується регулярно, але не частіше заданого інтервалу |

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

Для рев’юера

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

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