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

이 두 가지 방법 모두 DOM 이벤트 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어하는 방법입니다.

예를 들어, 웹/앱 사용자가 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 한다고 가정해 봅니다. 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅을 하게 되면 사용자는 크게 느끼지 못할 수 있으나 이 행위로 인해 수많은 스크롤 이벤트가 발생하게 됩니다.

즉, 사용자가 아래로 5000픽셀 정도의 스크롤 다운을 한다면 100개 이상의 이벤트가 발생될 가능성이 큽니다. 이러한 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅함으로써 매번 스크롤 이벤트에 대한 콜백(callback)이 발생하고 그 콜백이 수행하는 일이 매우 큰 리소스를 잡아먹게 될 것입니다.

다시 말해, 과도한 이벤트 횟수의 실행으로 이벤트 핸들러가 무거운 계산 및 기타 DOM 조작과 같은 작업을 수업이 많이 수행하는 경우 성능 문제가 발생하고, 이는 사용자 경험까지 떨어뜨리게 될 것입니다.

이러한 이벤트 문제에 대한 정교한 방법으로 사용되는 것이 Throttle, Debounce 이란 해결책입니다. Throttle과 Debounce는 이벤트 핸들러가 많은 연산(무거운 계산 및 기타 DOM 조작)을 과도하게 수행하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술입니다.

<aside> 💡 *Throttle과 Debounce 사용 사례

Debounce

• 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event 사용하기 위해
• 사용자가 키보드 입력을 중지 할 때까지 ajax 이벤트를 발생시키지 않기 위해
• 앱에서 요소를 드래그 할 때 좋은 성능을 보장하기 위해

Throttle

• 사용자가 키도드 입력시 100ms 마다 ajax 이벤트를 발생시키 위해
• 페이지의 스크롤 위치를 측정하고 최대 50ms 마다 응답하기를 바랄 경우에*

</aside>

*디바운스(debounce)와 스로틀(Throttle)은 시간이 지남에 따라 함수를 몇 번이나 실행 할지를 제어하는 유사한 기술이지만 서로 다릅니다.*

디바운스 또는 스로틀은 DOM 이벤트에 함수를 첨부 할 때 특히 유용합니다.

그 이유는 이벤트와 함수 실행 사이에 제어 계층을 제공하기 때문입니다. 그리고 기억해야 할 것은 DOM 이벤트가 얼마나 자주 내보내 질지는 제어하지 않는다는 것을 알아야 합니다.

Debounce

debounce event