디바운스와 스로틀

짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법

ex.

<aside>

scroll, resize, input, mousemove 이벤트는 짧은 시간 간격으로 연속해서 발생

→ 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능 문제를 일으킬 수 있음

</aside>

디바운스와 스로틀의 구현엔 타이머 함수가 사용된다.

const debounce = (callback, delay) => {
	let timerId;
	return event => {
		if (timerId) clearTimeout(timerId);
		timerId = setTimeout(callback, delay, event);
	};
};

const throttle = (callback, delay) => {
	let timerId;
	return event => {
		if (timerId) return;
		timerId = setTimeout(() => {
			callback(event);
			timerId = null;
		}, delay, event);
	};
};

<aside> <img src="/icons/asterisk_lightgray.svg" alt="/icons/asterisk_lightgray.svg" width="40px" />

setTimeout (콜백함수, 지연시간, 콜백함수에 전달할 매개변수)

</aside>

❄️ 디바운스

짧은 시간 간격으로 이벤트가 연속해서 발생하면, 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다.

⇒ 짧은 시간 간격으로 발생하는 이벤트를 그룹화해, 마지막에 한 번만 호출되도록