debounce 과 throttle

쓰로틀 (Throttle) 과 디바운스 (Debounce)

- DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 이벤트를 제어(제한)하는 방법

 

디바운스 (Debounce)

배경지식
- 전자에서는 기계적인 접점을 가지는 스위치는 접점이 붙거나 떨어지는 순간에 바운싱 현상이 있다.
이 바운싱 현상은 접점이 붙거나 떨어지는 그 짧은 순간에 접점이 고속으로 여러번 on/off 되는 현상
이런 바운싱 현상을 방지하기 위한 것이 디바운싱 기법

- 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술

(즉, 순차적 호출을 하나의 그룹으로 "그룹화" 할 수 있음)

연이어 호출되는 함수들 중 마지막 함수 (또는 제일 처음)만 호출하도록 하는 것

 

디바운스 (Debounce) 사용 사례

1. 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizeing event 를 반영하고 싶을 때

2. 사용자가 키보드 입력을 중지할 때까지 AJAX 이벤트를 발생시키지 않고 싶을 때

 

디바운스 (Debounce) 의 실행 기준

 

leading edge

: 처음에 실행한 함수를 실행하고 그 뒤의 이벤트들을 무시함

leading edge 와 throttle 의 차이점

leading edge : 설정한 타이머 시간안에 요청이 지속적으로 들어올 경우 모든 요청을 무시함
throttle : 지속적으로 요청이 들어올 경우 정해진 타이머 시간이 지나면 요청을 허용함

 

trailing edge

: 마지막에 실행한 함수를 실행하고 그 전의 이벤트들을 무시함

 

쓰로틀 (Throttle)

- 이벤트를 일정한 주기 마다 발생하도록 하는 기술

- 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.

마지막 함수가 호출 된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

특성 자체가 실행 횟수에 제한을 거는 것이기 때문에 일반적으로 성능 문제 때문에 많이 사용함.

 

쓰로틀 (Throttle) 사용 사례

1. 페이지의 스크롤 위치를 측정하고 최대 50ms 마다 응답하기를 바랄 때

2. 앱에서 요소를 드래그 할 때 좋은 성능을 보장하기 위해

 

쓰로틀 (Throttle) 과 디바운스 (Debounce)의 차이점

쓰로틀 (Throttle) : 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장한다는 것.

디바운스 (Debounce) : 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법
( 5ms 가 지나기전에 계속 이벤트가 발생하는 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시됨 )