🧩 Debounce и Throttle в JavaScript: один сниппет — две техники

🧩 Debounce и Throttle в JavaScript: один сниппет — две техники

Когда ты ловишь события вроде scroll, resize, input, важно не перегружать браузер. Для этого существуют две техники:

debounce (отложить выполнение) и throttle (ограничить частоту вызовов). Ниже — универсальная функция, которая умеет и то, и другое:

function throttleDebounce(fn, delay, mode = 'throttle') {

let lastCall = 0;

let timeout;

return function (...args) {

const now = Date.now();

if (mode === 'debounce') {

clearTimeout(timeout);

timeout = setTimeout(() => fn.apply(this, args), delay);

} else {

if (now - lastCall >= delay) {

lastCall = now;

fn.apply(this, args);

}

}

};

}

// Использование:

// Debounce (например, поиск по инпуту)

input.addEventListener('input', throttleDebounce(handleInput, 300, 'debounce'));

// Throttle (например, scroll)

window.addEventListener('scroll', throttleDebounce(trackScroll, 200, 'throttle'));

🔍 Теперь ты можешь экономить ресурсы браузера и свой CPU без лишней боли.

Простая настройка: mode = 'debounce' или 'throttle' — в одном месте.

📦 Подходит для всех современных проектов. Экономь ресурсы — пиши как самурай 🗡

Snipit

🔗 https://dzen.ru/id/647785ca082c0024532dca3d

#js #frontend #сниппеты