🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Поймайте паузу в движении мыши одним таймером
Когда пользователь двигает мышь, прокручивает страницу или меняет размер окна, браузер создаёт десятки событий в секунду. Если на каждое отправлять запрос или менять элементы страницы, приложение может работать менее плавно. Дебаунс — приём, который ждёт паузу: новый сигнал отменяет прежний таймер и запускает его заново.
const debounce = (callback, wait) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(
() => callback(...args), wait
);
};
};
const onMove = debounce(
event => console.log(event.clientX), 250
);
window.addEventListener('mousemove', onMove);
Запустите пример, поводите мышью и остановитесь. Обработчик сработает после паузы. Затем уберите debounce и сравните число строк в консоли. Исходный вариант функции и пояснения есть в сниппете Josh W. Comeau.