Каждый вызов debounce отменяет прежний таймер и планирует новый. Функция выполнится один раз после трёх секунд тишины, с аргументами и this последнего вызова.
Отложенный вызов функции после серии вводов
Каждый вызов debounce отменяет прежний таймер и планирует новый. Функция выполнится один раз после трёх секунд тишины, с аргументами и this последнего вызова.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Необходимо написать функцию debounce, которая гарантирует, что вызов console.log('API call') будет выполнен лишь один раз — после того, как последний вызов обёрнутой функции произойдёт и пройдет пауза в 3 секунды.
const debouncedInput = debounce(() => console.log('API call'), 3000);
debouncedInput();
debouncedInput();
debouncedInput();
debouncedInput();
Ответ
Каждый вызов debounce отменяет прежний таймер и планирует новый. Функция выполнится один раз после трёх секунд тишины, с аргументами и this последнего вызова.
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
Четыре последовательных вызова из условия создадут один фактически выполненный API call. Три секунды — минимальная задержка, а не точное время запуска: занятый event loop может отложить callback. Это trailing-вариант debounce, без немедленного первого вызова. Для компонента с жизненным циклом стоит дополнительно предоставить отмену таймера при размонтировании.