디바운스와 스로틀

scroll, resize, input , mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다.
이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다고 한다.

 

그래서 이러한 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이 디바운스와 스로틀이다.

 

디바운스

디바운스 예시 코드

사용자가 텍스트 입력 필드에 값을 입력할 때마다 연속해서 input 이벤트가 발생한다.

입력한 값을 서버에 보내는 Ajax 요청을 수행하게 되면 사용자가 입력을 하고 있는 와중에 서버로 전송될 수 있다.

사용자가 input에 텍스트를 일정시간 입력하지 않았다면 입력이 완료되었다는 것으로 간주하는
debounce함수이다 실제 text를 치다가 일정시간 입력하지 않으니 div태그로 내가 입력한 텍스트가 출력되었다.

디바운스

debouce는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 

일정 시간 동안 이벤트가 더 이상 발생하지 않으면 이벤트 핸들러가 한 번만 호출되도록 한다.

resie이벤트 처리 ,input 요소 입력 값 ajax 요청 자동완성 ui 구현, 버튼 중복 클릭 방지 등
유용하게 쓰인다고 한다.

유의할 점으로 실무에서는 Underscore의 debouce 함수나 Lodash의 debounce함수를 사용해야 한다고 함

 

쓰로틀

쓰로틀 예시

scroll 이벤트는 사용자가 스크롤할 때 짧은 시간 동안 연속해서 발생한다. 이러한 경우의 이벤트 핸들러의

호출을 방자하기 위해 throttle 함수는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가

호출되도록 호출 주기를 만든다.

 

쓰로틀

짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 간격으로 이벤트 

핸들러를 호출하는 스로틀은 scroll 이벤트 처리나 무한 스크롤등에 유용하게 사용된다 한다!

(무한 스크롤은 구미가 당긴다 한번 해봐야겠다)

디바운스와 같이 실무에서는 Underscore의 throttle함수나 Lodash의 throttle함수를 사용해야 한다고함

lodash함수는 예전에 인프런 함수형 프로그래밍 강의에서 써먹었던 적이 있는데 다 까잡쉇다. 

 

책 : 모던 자바스크립트 deep dive