Throttling — это техника, которая гарантирует, что функция выполняется максимум один раз в течение указанного временного интервала, независимо от того, сколько раз она была вызвана за этот период.
Это отличается от debouncing — throttling гарантирует регулярное выполнение с постоянной скоростью, вместо того чтобы ждать прекращения активности.
Когда событие срабатывает повторно, throttling позволяет хендлеру запуститься один раз, затем игнорирует все последующие вызовы до истечения временного интервала. После этого следующий вызов пропускается, и цикл повторяется.
Базовая реализация throttle выглядит так:
function throttle(fn, limit) {
let lastCall = 0;
return function(...args) {
const now = Date.now();
if (now - lastCall >= limit) {
lastCall = now;
fn(...args);
}
};
}
Самый распространённый пример — обработка событий scroll или resize, которые могут срабатывать сотни раз в секунду в браузере.
Без throttling:
С throttling:
window.addEventListener('scroll', throttle(() => {
console.log('Scroll position updated');
}, 200));
Используй throttling, когда тебе нужно предсказуемое, равномерно распределённое выполнение для высокочастотных событий, таких как:
Throttling гарантирует, что функция выполнится не более одного раза за указанный промежуток времени, а debouncing ждёт, пока активность полностью прекратится, прежде чем выполнить функцию.
Новый — ещё не проверен сообществом
Вы