기본 콘텐츠로 건너뛰기

라벨이 무한 스크롤인 게시물 표시

디바운스와 쓰로틀, 무엇이 어떻게 다르고 언제 선택해야 할까

디바운스와 쓰로틀, 무엇이 어떻게 다르고 언제 선택해야 할까 빠른 답 입력이 멈춘 뒤 한 번만 실행하면 되는 작업은 디바운스가 맞습니다. 연속 이벤트 중에도 일정 주기로 반응해야 하면 쓰로틀이 더 자연스럽습니다. 무한 스크롤을 scroll 이벤트로 구현한다면 보통 쓰로틀이 유리하지만, 최신 브라우저 환경에서는 Intersection Observer도 함께 비교해야 합니다. 실무에서는 delay 값보다 leading 또는 trailing 여부, 그리고 중복 요청 방지가 더 큰 차이를 만듭니다. 목차 한눈에 비교 왜 자주 헷갈릴까 시간 흐름으로 이해하기 어떤 상황에 무엇을 고를까 코드로 보는 디바운스 코드로 보는 쓰로틀 무한 스크롤에서는 왜 쓰로틀이 먼저 떠오를까 구현할 때 놓치기 쉬운 점 한눈에 비교 실행 시점 디바운스는 마지막 이벤트 이후 조용한 시간이 지나야 실행되고, 쓰로틀은 이벤트가 계속돼도 정한 간격마다 실행 기회를 만듭니다. 중심 질문 디바운스는 "마지막 값만 필요하나"에 가깝고, 쓰로틀은 "중간 상태도 주기적으로 읽어야 하나"에 가깝습니다. 사용자 체감 디바운스는 호출 수를 많이 줄여 주지만 결과가 늦게 보일 수 있고, 쓰로틀은 반응을 이어 가기 쉽지만 호출이 완전히 사라지지는 않습니다. 부하 성격 디바운스는 네트워크 요청 압축에 유리하고, 쓰로틀은 연속 이벤트 처리의 상한을 두는 데 가깝습니다. 대표 사례 검색 자동완성, 자동 저장은 디바운스와 잘 어울리고, 스크롤 위치 계산, 드래그 좌표 반영은 쓰로틀 쪽이 더 자주 쓰입니다. 브라우저는 input , scroll , resize , mousemove 같은 이벤트를 매우 짧은 간격으로 연속 발생시킵니다. 이때 핸들러 안에서 DOM 측정, 네트워크 요청, 상태 변경을 그대로 수행하면 화면 반응이 흔들리거나 같은 요청이 과하게 반복될 수 있습니다. 디바운스와 쓰로틀은 이런 과호출을 줄이는 도구이지만, 두 기법이 답하는 질문은 조금 다릅니다. 왜...