디바운스(debounce)와 쓰로틀링(throttle)

 

스크롤을 맨 위로 이동하게 하는 버튼을 만드는 중에 알게 된 내용이다.

어느정도 화면을 내리면 버튼이 생겨야했기 때문에 스크롤 값을 저장해야했다.

로그를 찍어보니 스크롤 할때마다 과하게; 함수를 호출해서 사용하게 됐다.

 

디바운스(debounce)과 쓰로틀링(throttle)

둘 다 DOM 이벤트에 함수를 첨부 할 때 특히 유용하다.

그 이유는 이벤트와 함수 실행 사이에 제어 계층을 제공하기 때문이다.

둘 다 시간에 따라 함수를 얼마나 실행 할지를 제어하지만 서로 다르다.

DOM 이벤트를 제어하지는 않는다고한다.

 

Debounce

Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술입니다.

즉, 순차적 호출을 하나의 그룹으로 그룹화할 수 있다.

 

Throttle

Throttle은 이벤트를 일정한 주기마다 발생하도록 하는 기술입니다. 예를 들어 Throttle의 설정시간으로 1ms 를 주게되면 해당 이벤트는 1ms 동안 최대 한번만 발생한다. 특성 자체가 실행 횟수에 제한을 거는 것이기 때문에 일반적으로 성능 문제 때문에 많이 사용한다.

 

차이점

디바운싱과 스로틀의 가장 큰 차이점은 Throttle은 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장한다는 것입니다. Debounce는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법이다. 따라서 5ms 가 지나기전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시됩니다.

 

헷갈리면 둘 다 써보고 로그 찍어보면 확실하게 알 수 있다 ㅋ,ㅋ