debounce
동일한 이벤트가 여러번 반복적으로 발생했을 때 가장 최근에 발생한 이벤트만 처리하는 방법
예를 들어 debounce 에 시간을 1초로 설정하고 이벤트를 0.5초간격으로 100번 발생시킬 경우 이벤트 사이 시간이 1초보다 작기 때문에 마지막 100번째 이벤트만 처리하게 된다.
const debounce = (func, wait = 300) => {
let timeout;
// debounce 는 함수 호출 할 때마다 timer 초기화
return (...args) => {
// closure 를 이용, 외부함수 변수 정보를 가지고 조작함
// 기존에 queue 에 등록된 timer 제거
clearTimeout(timeout);
// 새로운 timer 설정
timeout = setTimeout(() => {
func(...args);
}, wait);
};
};throttle
동일한 이벤트가 여러번 반복적으로 발생했을 때 설정한 시간 마다 이벤트를 처리하는 방법
예를 들어 throttle 에 시간을 1초로 설정하고 이벤트를 0.5초간격으로 100번 발생시킬 경우 설정한 시간인 1초마다 이벤트를 처리해서 약 50번 이벤트를 처리하게 된다.
function throttle(func, delay = 300) {
let timer;
return () => {
// 설정된 timer 가 없으면 새로 등록
if (!timer) {
// 제한시간이 끝나면 timer 새로 만듦
// throttle 는 특정시간 마다 timer 초기화
timer = setTimeout(() => {
timer = null;
func(...args);
}, delay);
}
};
}참고
Debounce – How to Delay a Function in JavaScript (JS ES6 Example) (freecodecamp.org)
web-developer