Зміст дописунатисність на посилання, щоб перейти до потрібного місця
Якщо ви коли-небудь працювали з подіями в 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, можна покращити взаємодію з користувачем і зменшити навантаження на систему.
![[Fix] Heroku / SearchBox addon - помилка ідексації "The client is unable to verify that the server is Elasticsearch"](https://tseivo-prod.s3.eu-north-1.amazonaws.com/m448ldh0z3jg07nqvkzqasw9g4nv)
