Throttle vs Debounce

진짜 간랸하게 요약해서 설명하자면 

 

Throttel과 Debounce의 공통점은 잦은 요청에 의해 퍼포먼스가 떨어질 때 해결방안이라고 할 수 있다.

 

처음에는 DMA와 비슷하다 생각했지만 엄연히 다르고... 느낌은? 비슷하다 할 수 있다.

 

예를 들어보자. 

 

임의의 인터럽트가 0.01초마다 요청된다고 생각해보자(우선순위는 최상위). 

 

그러면 우선순위에 의해 0.01초마다 수행이 될텐데, 그동안 다른 것은 수행하지 못한다. 즉 비효율적이다. 

 

좀 더 자세하게 예를 들어보자.

 

javascript에서 resize 이벤트 요청을 구현했다고 했을 때, 커서를 잡고 브라우저를 resize할 때 무수히 많은 요청이 일어난다.

 

1에서 100까지 크기를 resize할떄 100번의 이벤트가 일어날 것인데, 과연 유저는 1에서 100까지의 이벤트가 필요할까?

 

사실 유저는 resize의 최종 크기만 얻고싶은 것이다. 즉 무수히 많은 요청이 필요한게 아닌 유저가 최종적으로 마우스를 release했을 때 크기를 원하는 것이다. 추가적으로 resize하는 동안 이벤트로 인해 웹을 로딩할 때에 필요한 데이터를 못받게되면 그것은 너무 비효율적이다.

 

아래는 Debounce의 예제이다. 현재 브라우저창을 resize해보자. 

https://codepen.io/dcorb/pen/XXPjpd

See the Pen Debounce Resize Event Example by parksy1775 (@parksy1775) on CodePen.

(티스토리상에서는 이벤트가 발생하지 않으니 CodePen을 직접 들어가서 확인하자)

 

일반적인 이벤트는 무수히 많은 요청을 했는데, Debounce는 최종적인 마지막 resize 이벤트만 요청을 한 것을 볼 수 있다.

 

---

그렇다면 Throttle과 Debounce의 차이첨은 뭘까?

 

Throttle은 무수히 많은 요청을 임의로 지정한 시간만큼 요청한다.

 

예를 들면 Resize를 10초간 수행했을 때 Throttle은 임의로 지정한 1초를 간격으로 이벤트를 수행한다.

 

Debounce는 임의로 지정한 1초동안 마지막으로 수행된 이벤트를 수행한다.(1초 안에 이벤트가 실행되면 시간을 다시 잰다)

 

즉 1초 안에 resize 이벤트를 무수히 많이 수행해도 결국 마지막 이벤트만 수행되는 것이다.

 

아래는 Throttle과 Debounce의 예제를 정말 보기쉽게 표현한 코드이다.

https://codepen.io/chriscoyier/pen/vOZNQV

 

구글링을 하면 대부분이 js 내용인데, 사실 H/W & S/W 모두 해당하는 개념이다. 

 

todo 

Throttle vs Debounce 예제를 직접 만든다.