Функция debounce нужна для того, чтобы ограничить частоту вызова переданной функции func. В этом случае, debouncedIncrement должна вызывать increment не чаще, чем раз в 100 мс, и при множественных вызовах подряд — выполнить increment только один раз после того, как вызовы прекратятся на 100 мс.
Реализуй функцию debounce — декоратор, возвращающий функцию, которая при нескольких вызовах подряд выполняет только последний вызов после заданной задержки.
Функция debounce нужна для того, чтобы ограничить частоту вызова переданной функции func.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Функция debounce нужна для того, чтобы ограничить частоту вызова переданной функции func. В этом случае, debouncedIncrement должна вызывать increment не чаще, чем раз в 100 мс, и при множественных вызовах подряд — выполнить increment только один раз после того, как вызовы прекратятся на 100 мс.
Реализация debounce может выглядеть так:
function debounce(func, wait = 0) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
Объяснение:
- При каждом вызове возвращённой функции очищается предыдущий таймаут.
- Новый таймаут запускается на
waitмиллисекунд. - Если вызовы идут подряд быстрее, чем
wait, функцияfuncне вызывается. - Как только вызовы прекращаются на
waitмс, вызываетсяfuncодин раз.
В твоём примере:
- Первые несколько вызовов
debouncedIncrement()идут подряд и не вызываютincrementсразу. - После паузы в 100 мс вызывается
incrementи увеличиваетi. - Таймауты с задержкой 150, 200 и 350 мс демонстрируют, что вызовы, близкие по времени, объединяются, а вызовы с задержкой вызывают
incrementотдельно.
Это классическая реализация debounce для контроля частоты вызовов функций, например, при обработке событий ввода или прокрутки.