Back to questions
Middle
5
let i = 0; function increment() { i++; console.log(i) } function debounce(func, wait = 0) {} const debouncedIncrement = debounce(increment, 100); debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 0 debouncedIncrement(); // i = 1 setTimeout(debouncedIncrement, 150); // i = 2 setTimeout(debouncedIncrement, 200); // i = 2 setTimeout(debouncedIncrement, 350); // i = 3
Companies where asked
IGaming
Answer from AI
sobes.tech AI
Функция 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 для контроля частоты вызовов функций, например, при обработке событий ввода или прокрутки.