Debounce-функция позволяет сгладить частые вызовы определённой функции, вызывая её лишь после того, как поток событий прекратится на заданный интервал времени. Это часто применяют для оптимизации обработки ввода, например при вводе текста в поле поиска или при изменении размеров окна браузера.
Пример классической реализации debounce-функции на JavaScript:
function debounce(func, wait)
{
var timeout;
return function(...args)
{
var context = this;
clearTimeout(timeout);
timeout = setTimeout(function()
{
func.apply(context, args);
}, wait);
};
}
Пример: есть функция, которая вызывается при вводе текста в поле поиска:
function handleSearch(query)
{
var safeQuery = validateQuery(query);
console.log("Ищу: " + safeQuery);
}
var debouncedSearch = debounce(handleSearch, 300);
# Предположим, что этот код вызовется при вводе текста в поле
# В результате handleSearch будет вызвана только после 300 мс "тишины" при вводе
inputElement.addEventListener('input', function(event)
{
var userInput = event.target.value;
debouncedSearch(userInput);
});
Комментарии
0Нашли ошибку или хотите дополнить материал?