Debouncing and Throttling Explained Through Examples | CSS-Tricks1

  • throttle: 함수가 호출되는 속도를 제한 (일정시간 동안)2
  • debounce: 추가 호출 없이 일정 시간이 경과할 때까지 함수 실행을 지연하거나 제한 (마지막 이벤트만)3

Footnotes

  1. 검색 입력, 스크롤 이벤트, 크기 조정 이벤트 등 디바운싱과 스로틀링이 유용할 수 있는 사례들 ↩

  2. Throttle | MDN Glossary: “it refers to slowing down a process such that an operation can only be performed at a certain rate.” ↩

  3. Debounce | MDN Glossary: “throttling enforces limits on continuous operations, while debouncing waits for invocations to stop for a specific time to consolidate many noisy invocations into one single invocation.” ↩

#throttle#debounce#lodash#event#ui
#22

검색어 필터링 UI → Debounce (300-500ms)

타이핑 완료 후 검색이 더 자연스러움. “자바스크립트” 입력 시 매 글자마다 검색하면 비효율적. Debounce 는 호출이 멈출 때까지 기다리고, Throttle 은 계속 호출돼도 정해진 최대 빈도로 실행한다.1

const handleSearch = debounce((term) => performSearch(term), 300)
input.addEventListener('input', (e) => handleSearch(e.target.value))

Throttle은 실시간 검색 결과를 보여주면서 요청 제한할 때 사용 (1초마다 최대 1회 등).

Footnotes

  1. Debounce - MDN Glossary: “The key difference is that throttling enforces limits on continuous operations, while debouncing waits for invocations to stop for a specific time to consolidate many noisy invocations into one single invocation.” ↩

#debounce#throttle#search#ux
#518