카테고리 없음

Throttle, Debounce

eumjo_o 2022. 10. 1. 02:32
  • Scroll, Input, Mousemove와 같이 짧은 시간 동안 반복적으로 이벤트 핸들러가 여러 번 호출되는 것을 방지하는 프로그래밍 기법
  • 자주 사용되는 이벤트나 함수의 실행 빈도수를 줄여서 성능 상의 이점을 얻는다. (이벤트 제어, 제한)

Throttle

짧은 시간 간격으로 이벤트가 연속해서 발생하더라도, 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다. → 일정 시간 단위로 이벤트 핸들러가 호출

  • 라이브러리Lodash - https://lodash.com/docs/4.17.15#throttle
  • Underscore - https://underscorejs.org/#throttle
  • 즉, 일정 시간이 경과하기 전에 이벤트가 발생하면 아무것도 하지 않다가 해당 시간이 경과한 이후에 이벤트가 발생하면 콜백 함수를 호출하고 새로운 타이머를 재설정한다.
  • Scroll 이벤트나 무한 스크롤 등의 경우
// Avoid excessively updating the position while scrolling.
jQuery(window).on('scroll', _.throttle(updatePosition, 100));

Debounce

짧은 시간 간격으로 이벤트가 연속해서 발생하면, 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. → 마지막에 한 번만 이벤트 핸들러가 호출

  • 라이브러리Lodash - https://lodash.com/docs/4.17.15#debounce
  • Underscore - https://underscorejs.org/#debounce
  • 즉, 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간 동안 이벤트가 더이상 발생하지 않으면 이벤트 핸들러가 한 번만 호출되도록 한다.
  • 엘레베이터/자동문 작동과 비슷 ⇒ 문이 닫히기 시작하는데 갑자기 다른 사람이 타려고 하면, 문이 닫히는 것이 아니라 다시 열리게 된다.
  • Input 이벤트, Resize, 버튼 중복 클릭 등의 경우
// Avoid costly calculations while the window size is in flux.
jQuery(window).on('resize', _.debounce(calculateLayout, 150));

Throttle과 Debounce의 차이점

  • 이벤트를 언제 발생 시킬 지의 시점 차이
  • Debounce 는 입력이 끝날 때까지 계속 기다리지만, Throttle 는 입력이 시작되면 일정 주기로 계속 실행
  • Debounce는 일정 시간 안에 같은 요청이 들어오면 이전 요청은 취소되고, Throttle은 일정 시간 동안 요청이 한 번만 수행

참고