스로틀(Throttle)과 디바운스(Debounce)

spare8433 2022. 8. 28. 17:17

단도직입적으로 말하자면 스로틀(Throttle)과 디바운스(Debounce)는 이벤트를 기반으로 실행하는 자바스크립트 특성상 이벤트(event)를 효과적으로 제어(제한)하는 방식(기술)이다.

짧은 시간 내에 반복되는 이벤트로 인한 발생하는 연산들을 제어하여 성능저하를 막고 의도한 만큼만 실행 하기 원할 때 사용한다.

디바운스(Debounce)

순차적으로 반복되는 이벤트를 그룹화하여 끝나는 시점에 실행시켜 제어하는 방식

※ 예시 : 창 크기 resize

일정시간 동안 이벤트가 한번만 실행되도록 제어하는 방식

※ 예시 : 무한 스크롤링

스로틀(Throttle)과 디바운스(Debounce) 의 가장 큰 차이점은 스로틀(Throttle) 은 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장 한다는 것이다.

디바운스(Debounce) 는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법입니다.

따라서 5ms 가 지나기전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시됩니다.