Throttle vs Debonuce

👋 들어가기 전

쓸 떄마다 헷갈리는 개념인, 쓰로틀과 디바운스를 이번 기회에 확실히 정리해보자.

---

🏁 학습할 내용

• Throttle
  • 어원
  • 역할
  • 적용 상황과 예시
• Debounce
  • 어원
  • 역할
  • 적용 상황과 예시

---

🏎️ Throttle

 

📚 어원

 

나무위크를 참고하면, 쓰로틀은 자동차 부품에서 많이쓰이는 용어로 보인다.

 

자동차의 원리를 간다하게 살펴보면 (출처는 아래 유튜브링크를 확인) 다음과 같다.

• 연소를 위한 공기 흡입
• 연료 투입
• 점화 및 압축
• 폭발
• 동력 생성 

여기서 우리가 배울 쓰로틀은 공기 흡입을 조절하는 역할이다.

 

📌 역할

 

일정 시간간격에 최대 한번 함수가 실행

 

그렇다면, 프로그래밍에서 쓰로틀은 어떤 역할을 할까??

 

Rxmarble 사이트에서 throttle을 살펴보자.

 

모든 원소가 output이 될 수 있게, 조절해보니, x가 1일때 간격과 x가 2일 때, 간격이 다르긴하지만

같은 x값에 대해서는 일정 주기를 볼수 있다

 

저 간격보다 조금보다, 더 앞으로 옮기면, 원소가 무시된다.

 

🎯 적용 상황과 예시

 

가장 대표적으로는 스크롤, 버튼 이벤트등이 있다.

 

유저가 무의식적으로 대량의 이벤트를 보낼 수 있는 상황에 많이 쓰이는 것 같다.

 

일정시간 무시해버리면 되니깐

---

🎛️ Debounce

📚 어원

Debounce는 전자공학에서 유래됐다.

 

스위치가 눌렸다가 떨어질 때, 우리는 딱 한번만 눌렀다고 생각할 수 있지만, 실제로는 여러번 접촉할 수 있다.

 

이 때 기계적인 접촉으로 인해 발생하는 짧은 노이즈(잡음)를 제거하기 위해 사용되는 기술로

 

전체적인 잡은 제거, 진동을 가라 앉히는 개념이다.

📌 역할

이벤트가 발생한 후 일정 시간(delay) 동안 추가 이벤트가 없으면 실행

 

이번에도 Rxmarble 사이트에서 throttle을 살펴보자.

 

Throttle처럼 일정 간격으로 위치시키니깐, 앞에 있는 원소들이 계속 무시된다.

 

여기서 Throttle과 Debouce 모두 일정시간이라고 써있지만, 가장 큰 차이는 

 

일정시간이 Throttle은 변하지 않지만, Debouce는 마지막 원소를 기준으로 갱신되는걸 볼 수 있다.

 

🎯 적용 상황과 예시

 

가장 대표적으로는 검색창이 있다.

 

검색창에 글자가 입력될 떄마다, 서버로 API를 보내면, 서버에 많은 부하가 걸린다.

 

이 때, 디바운스를 이용해 마지막 글자 입력 후 일정시간이 지나면 서버로 1번 보내면 훨씬 부하를 줄일 수 있다.

---

😀 소감 및 마무리

간단하게 정리해보자.

구분	Throttle	Debounce
실행 타이밍	주기적으로 실행	마지막 이벤트 이후 일정 시간 지나면 실행
실행 빈도	주기적, 정해진 간격마다	마지막 이벤트 끝나고 한 번
사용 예시	스크롤, 리사이즈 이벤트 처리	검색어 자동완성, 입력 후 API 요청

---

출처

https://motor283.com/en/car-tips-mechanics-maintenance/the-throttle-or-throttle-valve-in-the-car

The Throttle or throttle valve in the car

https://velog.io/@bgyoons/%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81

디바운싱과 쓰로틀링

https://www.youtube.com/watch?v=06bQPPjnw1g

https://fearlessnight.com/rotaryHowTo/index.html

Fearless Night

https://llu.is/throttle-and-debounce-visualized/

Throttle and debounce visualized