[모던자바스크립트-DeepDive] 8. 타이머

타이머 함수는 ECMAScript에 정의된 빌트인 함수가 아니지만, 브라우저 환경과 Node.js 환경 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체이다.

JS 엔진은 단 하나의 실행 컨텍스트를 가지며, JS 엔진은 싱글 스레드로 동작한다.

이런 이유로 타이머 setTimeout과 setInterval은 비동기 방식으로 동작한다.

const timerId = setTimeout(() => console.log('Hey'), 1000);
clearTimeout(timerId);

const timeoutId = setInterval(() => {
	console.log(count);
	if (count++ === 5) clearInterval(timeoutId);
}, 1000);

scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 연속적으로 발생한다.

디바운스와 스로틀은 짧은 시간에 연속으로 발생하는 이벤트를 그룹화해 과도한 이벤트 핸들러 호출을 방지하는 기법이다.

디바운스(debounce)

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

즉, 짧은 시간 간격으로 발생하는 이벤트를 그룹화해 마지막 한 번만 이벤트 핸들러가 호출되도록 한다.

스로틀(throttle)

짧은 간격으로 이벤트가 연속해서 발생해도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.

즉, 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 한다.

스크롤 이벤트 처리나 무한 스크롤 UI 구현 등에 쓰인다.