2020-01-25
정리
: Javascript30을 공부한 내용 기록
Debounce와 Throttle를 이해했다.
Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만을 발생시키는 기술이다.
Throttle는 일정한 주기마다 이벤트를 발생시키는 기술이다.
const debounce = (func, time = 500) => {
let timer = null;
return (...parameters) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func(...parameters);
console.log(timer);
timer = null;
}, time);
};
};
const throttle = (func, time = 500) => {
let timer = null;
return (...parameters) => {
if (!timer) {
timer = setTimeout(() => {
func(...parameters);
console.log(timer);
timer = null;
}, time);
}
};
};
//...
window.addEventListener('scroll', throttle(doSomething));
window.addEventListener('scroll', debounce(doSomething));
👋