디바운스(debounce) 와 쓰로틀(throttle) 은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법입니다. 이 두 가지 방법은 비슷해 보이지만, 동작 방식에 차이가 있습니다.

디바운스는 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러가 실행되는 방식입니다. 이를 통해 불필요하게 많은 이벤트 호출을 방지할 수 있습니다. 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보내는 방식으로 디바운스를 적용할 수 있습니다.

쓰로틀은 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식입니다. 즉, 이벤트가 계속해서 발생하더라도 설정된 시간 동안은 한 번만 이벤트 핸들러가 실행됩니다. 예를 들어, 사용자가 연속 클릭을 한다면 클릭할 때마다 이벤트가 발생하는데, 이를 매번 처리하면 부하가 불필요하게 커지니, 쓰로틀을 적용해 일정 간격 내 한 번만 처리하게 할 수 있습니다.

디바운스와 쓰로틀 중에서 무한 스크롤 구현 시 어떤 방식을 선택하실 건가요? 그 이유는 무엇인가요? 🤔

무한 스크롤 구현 시에는 쓰로틀을 사용하는 것이 더 적합합니다.

먼저, 스크롤은 연속적인 동작이며 사용자가 페이지 하단에 도달했을 때 즉각적인 반응을 기대합니다. 쓰로틀은 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행하므로, 사용자에게 더 자연스러운 스크롤 경험을 제공할 수 있습니다.

반면, 디바운스를 사용할 경우, 사용자가 반복적으로 스크롤한다면 마지막 스크롤이 멈춘 후에야 데이터를 불러오기 시작하므로 지연이 발생할 수 있습니다.

📚 추가 학습 자료를 공유합니다.

• [zerocho] 쓰로틀링과 디바운싱