Czym jest debounce w JavaScript i dlaczego jest to ważne?

21 mar 16:39

2 min. czytania

meme code

@memecode

Okładka posta: Czym jest debounce w JavaScript i dlaczego jest to ważne?

Spis treściKliknij link, aby przejść do wybranego miejsca

Jak działa debounce?Przykład debounce w JavaScript Gdzie używać debounce?

Ta treść została automatycznie przetłumaczona z ukraińskiego.

Zobacz oryginał

Jeśli kiedykolwiek pracowałeś z wydarzeniami w JavaScript, takimi jak scroll, resize czy keyup, to prawdopodobnie zauważyłeś, że mogą one być wywoływane bardzo często. Na przykład, podczas wpisywania tekstu w polu wyszukiwania, zdarzenie keyup może być wywoływane po każdym naciśnięciu klawisza. Może to stworzyć dodatkowe obciążenie dla przeglądarki lub serwera, szczególnie jeśli każde wywołanie wykonuje zapytanie do API.

Aby uniknąć takich problemów, stosuje się debounce — technikę, która ogranicza częstotliwość wywołań funkcji, opóźniając jej wykonanie do momentu, gdy zdarzenie przestanie się powtarzać przez określony czas.

Jak działa debounce?

Idea jest prosta: gdy zdarzenie jest wyzwalane, odkładamy wykonanie funkcji na określony czas. Jeśli zdarzenie jest wyzwalane ponownie przed upływem tego czasu, timer jest resetowany, a odliczanie zaczyna się od nowa. Tylko gdy zdarzenie ustaje, funkcja jest wykonywana.

Przykład debounce w JavaScript

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

// Użycie debounce do obsługi zdarzenia wprowadzania tekstu
const input = document.querySelector("#search");
const handleInput = (event) => {
  console.log("Szukaj: ", event.target.value);
};

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

W tym przykładzie każde wprowadzenie w polu wyszukiwania aktualizuje timer, a tylko po 500ms bez nowego wprowadzenia wykonywana jest funkcja handleInput.

Gdzie używać debounce?

Zapytania wyszukiwania — aby nie wysyłać zapytań do serwera przy każdym naciśnięciu klawisza.
Obsługa zmiany rozmiaru okna (resize) — aby nie przeciążać przeglądarki obliczeniami.
Słuchacze zdarzeń scroll — na przykład, do ładowania nowej zawartości podczas przewijania (nieskończone przewijanie / endless scroll).
Automatyczne zapisywanie formularzy — aby zapisywać dane tylko po zakończeniu wprowadzania.
Walidacja formularzy - na przykład, do sprawdzania dostępności nicku.

Debounce pomaga zoptymalizować wydajność, zmniejszając liczbę wywołań funkcji, które są często wyzwalane. Jest to szczególnie przydatne przy pracy z częstymi zdarzeniami, takimi jak wprowadzanie tekstu, przewijanie czy zmiana rozmiaru okna. Używając debounce, można poprawić interakcję z użytkownikiem i zmniejszyć obciążenie systemu.