[매일메일] 디바운스와 쓰로틀, 무한 스크롤? (FE.250108)

디바운스(Debounce)와 쓰로틀(Throttle)은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법

 

• Debounce: 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러 실행
  • 검색창에 사용자가 검색어를 입력할 때, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보냄
• Throttle: 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리함
  
  • 이벤트가 계속해서 발생해도 설정된 시간 동안은 한 번만 이벤트 핸들러가 실행됨
  • 사용자가 연속 광클을 시도할 경우, 일정 간격 내 한 번만 요청을 보냄
• 무한 스크롤 구현 시 유리한 방법은?
  
  • 쓰로틀: 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행해서 자연스러운 스크롤 경험을 제공함
  • 디바운스: 마지막 스크롤이 멈춘 후, 일정 시간 후에 데이터를 불러와서 지연이 발생함
  • 쓰로틀이 무한 스크롤 구현에 더 적합하다

---

 

출처

1. 매일메일 250108. 디바운스와 쓰로틀에 대해서 각각 설명해주세요. 41번. https://maeil-mail.kr.