Debounce와 Throttle

Debounce와 Throttle이 무엇인가?

Debounce와 Throttle은 자주 사용되는 이벤트나 함수의 실행 빈도를 줄여 성능적인 이점을 취하는 기법입니다.

Debounce

요청이 들어온 뒤 일정 시간 뒤에 요청을 수행합니다.
만약 지정된 시간이 지나지 않았는데 요청이 들어온다면 이전 요청은 취소됩니다.

Throttle

일정 시간 내에 한 번만 요청을 수행합니다.
지정된 시간 간격 내에 최대 1번의 요청만 수행됩니다.

setTimeout을 사용한 구현

debounce

debounce 호출

throttle

throttle 호출

setTimeout을 사용한 방식의 문제점

setTimeout이나 setInterval을 사용한 방식은 예상한대로 동작하지 않을 수 있습니다.

javascript는 싱글 스레드로 동작하기에 setTimeout이나 setInterval과 같은 비동기 작업들을 Task queue에 넣은 후 순차적으로 처리합니다.
queue에 저장된 Task를 처리하는 시점에 call stack이 비어있을 경우인데 이 시점에 지정해준 delay와 맞지 않는 다면 setTimeout, setInterval으로 등록한 callback은 실행되지 않을 가능성이 있습니다.

직접 구현한 방식과 lodash와 비교

lodash에서는 timeout의 시간을 입력하지 않거나 0일 경우 requestAnimationFrame를 사용하여 브라우저가 렌더링할 수 있는 횟수에 맞추어 호출을 합니다.

requestAnimationFrame은 브라우저가 repaint를 수행하기전에 지정된 callback을 호출합니다.
callback이 호출되는 수는 보통 60fps로 1초에 60번 호출되지만 대부분의 브라우저에서는 W3C의 권장사항에 따라
사용자의 디스플레이 주사율과 동일하게 호출합니다.

window.requestAnimationFrame() - Web API | MDN