scroll, resize, input, mousemove, mouseover과 같은 이벤트들은 짧은 시간동안 연속해서 발생한다.
Debounce 와 Throttle 은 과도한 이벤트 호출로 인한 성능 저하를 방지하고자 사용되는 프로그래밍 기법이다.
디바운스
디바운스 : 이벤트를 그룹화하여, 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 기술
예를들어 input은 값을 입력할 때마다 연속해서 이벤트가 발생한다. 만약 사용자가 아직 입력이 끝나지 않아도 ajax 요청을 보낸다면 서버에 부담을 주는 불필요한 처리일 것 이다. 하지만 우리는 사용자가 입력을 완료했는지 아닌지 모른다. 따라서 일정 시간 동안 input에 값을 입력하지 않으면 입력이 완료된 것으로 간주하고 콜을 보내면 된다.
즉, 일정 시간동안 이벤트가 더 이상 발생하지 않으면 이벤트 핸들러가 한 번만 호출해 주는 것이 디바운스다.
어디에 주로 사용할까?
- 자동완성 autocomplete
- 버튼 중복 클릭 방지 (토글 버튼)
- 연관 검색어 노출
스로틀
스로틀 : 일정 시간 내에 이벤트 핸들러가 최대 한 번만 함수 호출하도록하는 기법. 이벤트 핸들러가 호출되는 호출 주기를 만드는 것.
스크롤 이벤트와 같은 짧은 시간 간격으로 연속해서 발생하는 이벤트의 과도한 이벤트 핸들러 호출을 방지하기 위해 throttle 함수를 사용해 이벤트를 그룹화 시켜 일정 시간 단위로 호출되도록 호출 주기를 만든다.
어디에 주로 사용할까?
- 스크롤 이벤트
- 무한 스크롤
어떻게 적용할까?
Underscore의 throttle 함수나 Lodash의 throttle 함수를 사용해 적용할 수 있다.
참고
자바스크립트 Deep Dive
How to Correctly Debounce and Throttle Callbacks in React
https://dmitripavlutin.com/react-throttle-debounce/
