Debouncing — это метод оптимизации производительности, основанный на концепции вызова функции после того, как пользователь прекратит свою деятельность на определенное время.
Предположим, у нас есть веб-приложение, в котором есть кнопка для извлечения записей из базы данных. Очень часто пользователь нажимает кнопку несколько раз по ошибке или ради развлечения. Вы собираетесь вызывать API при каждом клике? Определенно не потому, что вызов базы данных является дорогостоящей операцией. Вот где дебаунсинг вступает в игру. Предположим, что наш HTML-файл выглядит примерно так.
Теперь, если мы просто вызовем бэкэнд, мы отправим n запросов на получение данных, что определенно очень плохо для производительности.
Чтобы преодолеть эту проблему, мы можем сделать вызов API через определенный период времени, но снова будет зарегистрировано n количество setTimeout. Для этого мы должны очистить предыдущий тайм-аут. Итак, мы должны пойти, как показано ниже.
функция устранения дребезга (fn, задержка) {
пусть setTimeoutId;
константа, что = это;
функция возврата () {
пусть аргументы = аргументы;
пусть контекст = это;
очистить время ожидания (setTimeoutId);
setTimeoutId = setTimeout (функция () {
fn.apply(контекст, аргументы);
}, задерживать);
};
}
сумма функций (а, б) {
console.log("Выполнение вызова API");
console.log(а + б);
}
const apiCall = debounce (сумма, 2000);
Поскольку мы вызываем функцию apiCall, которая вернет другую функцию, она будет привязана к кнопке.
Примечание:функция Debounce будет вызываться единицей, и, следовательно, значение setTimeoutId будет инициализировано один раз, и из-за свойства закрытия внутренняя функция сможет получить доступ к setTimeoutId и его предыдущему значению.
