Що таке debounce у JavaScript і чому це важливо?

21 Mar 16:39

2 min. read

meme code

@memecode

Post cover: Що таке debounce у JavaScript і чому це важливо?

Table of contentsClick link to navigate to the desired location

Як працює debounce?Приклад debounce у JavaScript Де використовувати debounce?

This content has not been translated yet.We're showing the original Ukrainian content below.

Switch to Ukrainian Translate with Google

Якщо ви коли-небудь працювали з подіями в JavaScript, наприклад, scroll, resize чи keyup, то, ймовірно, помічали, що вони можуть викликатися дуже часто. Наприклад, під час введення тексту в поле пошуку подія keyup може спрацьовувати після кожного натискання клавіші. Це може створити зайве навантаження на браузер або сервер, особливо якщо кожен виклик виконує запит до API.

Щоб уникнути таких проблем, використовують debounce — техніку, яка обмежує частоту викликів функції, затримуючи її виконання до моменту, коли подія перестане повторюватися протягом заданого часу.

Як працює debounce?

Ідея проста: коли подія тригериться, ми відкладаємо виконання функції на певний проміжок часу. Якщо подія тригериться знову до завершення цього часу, таймер скидається і відлік починається заново. Лише коли подія припиняється, функція виконується.

Приклад debounce у JavaScript

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// Використання debounce для обробки події введення тексту
const input = document.querySelector("#search");
const handleInput = (event) => {
  console.log("Пошук: ", event.target.value);
};

input.addEventListener("keyup", debounce(handleInput, 500));

У цьому прикладі кожне введення в поле пошуку оновлює таймер, і лише після 500мс без нового введення виконується handleInput.

Де використовувати debounce?

Пошукові запити — щоб не відправляти запити на сервер при кожному натисканні клавіші.
Обробка зміни розміру вікна (resize) — щоб не перевантажувати браузер обчисленнями.
Слухачі подій scroll — наприклад, для завантаження нового контенту при прокрутці (безкінечний скрол / endless scroll).
Автозбереження форм — щоб зберігати дані тільки після завершення введення.
Валідація форм - наприклад, для перевірки вільного нікнейму.

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