JavaScript] 디바운싱(Debouncing) & 쓰로틀링(Throttling)

JS에서 최적화작업? 에 가까운 개념입니다.

따로 의식하거나 개념을 알고 개발한 적은 없는데, 이번기회에 저도 찾아보면서 공부하고

앞으로의 개발에 있어 좋은 밑거름이 될 듯싶습니다.

 

 

---

 

 

디바운싱(Debouncing)

빈번하게 발생하는 이벤트를 특정 시간 이후에 한 번만 실행시키면 되는 최적화 기법입니다.

 

 

---

 

 

예시

간단한 예시로 설명드리면, 회원가입 페이지가 있다고 생각해 봅시다.

회원가입 정보 입력 후, submit버튼을 눌러 제출하는데 이 버튼을 광클해서 500ms에 5번 클릭하게 되면, post로 데이터가 5번 전달하게 될 것입니다. 

여기서 디바운싱 개념을 사용해서 특정 시간을 500ms로 설정하게 되면, 500ms 동안 클릭한 5번이 전부 전달되는 게 아니라 마지막 1번만 전달 되게 함으로써 효율적으로 사용할 수 있습니다.

 

 

---

 

 

주로 어디에 사용할까?

디바운싱은 성능도 효율적으로 만들지만, 유료 API를 사용할 때 큰 효과를 볼 수 있습니다.

저는 React만 개발하고 있고, 주로 오픈 API만 사용해서 유료 API를 사용해 본 적은 없지만,

디바운싱을 무시하고 개발하게 되면 클릭 한 번에 사용료를 지불해야 되기 때문에 크리티컬 한 이슈가 발생할 것입니다.

주로 검색할 때 사용된다고 합니다.

 

 

---

 

 

728x90

 

---

 

 

쓰로틀링(Throttling)

사용자가 이벤트를 몇 번을 발생시키든 일정한 시간 간격으로 한 번만 실행하도록 하는 기법입니다.

 

 

---

 

 

예시

사용자가 이벤트를 연달아 실행했을 때, 쓰로틀링기법을 사용하면 마지막함수를 기다리지 않고, 첫 번째 클릭에 의한 이벤트만 실행하고 나머지는 무시하게 됩니다.

중요한 포인트는 디바운싱과 달리 첫 번째 1번만 실행된다는 점입니다.

 

 

---

 

 

주로 어디에 사용할까?

짧은 주기로 실행되는 이벤트에 사용된다고 합니다. 스크롤이나 마우스 움직임같이 연속적으로 실행되는 곳이나, 버튼을 여러분 누를 경우가 있는 곳?으로 보시면 좋을 거 같습니다.

 

 

 

---

 

 

예

 

 

간단하게 예시로 counter를 늘려보는 코드입니다.

디바운싱 같은 경우는 계속 누르게 되면 clear를 계속하다가 마지막 이벤트만 실행하게 되고,

쓰로틀링 같은 경우는 처음에 누른 뒤로 계속 undefined로 초기화해주게 됩니다.

 

 

---

 

 

디바운싱이더니 쓰로틀링이던 개념을 갖지 않고, 개발하다 보면 즉흥적으로 사용할 법한 기법인 거 같습니다.
중복처리를 막기 위한 것이니깐..
이번기회에 정확한 용어와 개념을 잡고 넘어가면 좋은 거 같습니다.