lodash.debounce — это метод из библиотеки lodash, который ограничивает частоту вызова функции. Он полезен в ситуациях, когда необходимо уменьшить количество вызовов функции, например, при обработке событий ввода или изменения размера окна.
Основные возможности lodash.debounce
- Ограничение частоты вызова функции.
- Отложенный вызов функции до тех пор, пока не прекратится серия вызовов.
- Настройка времени задержки и ведущего/последующего вызова.
Установка
npm install lodash.debounce
Или с использованием Yarn:
yarn add lodash.debounce
Основное использование
Для использования lodash.debounce, импортируйте его и создайте "дебаунсированную" версию функции.
import debounce from 'lodash.debounce';
const handleResize = debounce(() => {
console.log('Window resized');
}, 300);
window.addEventListener('resize', handleResize);
Пример с полем ввода
Один из популярных примеров использования debounce — это обработка событий ввода в текстовом поле.
import React, { useState } from 'react';
import debounce from 'lodash.debounce';
const SearchInput = () => {
const [query, setQuery] = useState('');
const handleInputChange = debounce((e) => {
setQuery(e.target.value);
console.log('Searching for:', e.target.value);
}, 300);
return (
);
};
export default SearchInput;
Настройка debounce
Вы можете настроить поведение debounce, передав объект опций третьим аргументом. Доступные опции:
leading
: вызов функции в начале задержки.trailing
: вызов функции в конце задержки.maxWait
: максимальное время ожидания до вызова функции.
import debounce from 'lodash.debounce';
const saveInput = debounce((value) => {
console.log('Saving data:', value);
}, 300, { leading: true, trailing: false });
const handleChange = (e) => {
saveInput(e.target.value);
};
Отмена debounce
В некоторых случаях может потребоваться отменить "дебаунсированную" функцию. Для этого используйте метод cancel
.
import debounce from 'lodash.debounce';
const logMessage = debounce(() => {
console.log('This will not be logged if cancelled');
}, 1000);
logMessage();
logMessage.cancel();
Пример с использованием useEffect
Пример использования debounce с хуком useEffect
в React для обработки события изменения размера окна.
import React, { useEffect } from 'react';
import debounce from 'lodash.debounce';
const ResizeComponent = () => {
useEffect(() => {
const handleResize = debounce(() => {
console.log('Window resized');
}, 300);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
handleResize.cancel();
};
}, []);
return (
Resize the window and check the console
);
};
export default ResizeComponent;
Использование debounce с API вызовами
Пример использования debounce для уменьшения количества вызовов API при вводе данных пользователем.
import React, { useState } from 'react';
import debounce from 'lodash.debounce';
const fetchData = async (query) => {
const response = await fetch(`https://api.example.com/search?q=${query}`);
const data = await response.json();
console.log('Fetched data:', data);
};
const debouncedFetchData = debounce(fetchData, 500);
const ApiSearch = () => {
const [query, setQuery] = useState('');
const handleChange = (e) => {
const value = e.target.value;
setQuery(value);
debouncedFetchData(value);
};
return (
);
};
export default ApiSearch;
Заключение
lodash.debounce — это полезный инструмент для управления частотой вызова функций в JavaScript и React. Он помогает оптимизировать производительность приложений, уменьшая количество ненужных вызовов функций и событий. Благодаря гибким настройкам и простоте использования, debounce является важным инструментом в арсенале любого разработчика.