이벤트 제어하기. 쓰로틀링(throttling)과 디바운싱(debouncing)

 

 

✍ 쓰로틀링과 디바운싱

개념 : 디바운싱과 쓰로틀링은 자주 사용되는 이벤트나 함수의 빈도를 줄여 성능상 유리함을 가져오기 위한 개념이다.

 

📌 디바운싱

연속으로 호출되는 함수(이벤트)에서 가장 마지막(혹은 처음) 이벤트만 실행되도록 한다.
== 입력(이벤트)가 끝난 후에 요청을 보내면 된다.

검색 시 많이 사용

 

이벤트 발생 시점
입력이 끝날 때까지 무한정 대기

1. 이벤트 발생 시(ex onChange) 타이머를 설정해두고,
2. 200ms(설정 시간) 이전에 타자 입력(이벤트)가 발생하면
   • 이전 타이머는 클리어,
   • 새로운 타이머를 설정해준다.
3. 설정 시간 이전에 이벤트가 발생하지 않으면
   • 이벤트 발생 끝 => 코드가 실행된다.

 

📌 쓰로틀링

연속으로 호출되는 함수(이벤트)를 일정 시간 동안에 한번씩만 실행되도록 한다.
== 몇 초, 몇 밀리초에 한번씩만 실행되게 제한을 두는 것

스크롤 이벤트에서 많이 사용

 

이벤트 발생 시점
입력이 시작되면 일정 주기로 반복 실행.

1. 이벤트 발생 시 몇 밀리초에 한번씩 실행되도록 함수를 설정해준다.
2. 이벤트가 발생하면
   • 200ms(설정 시간)에 한 번 씩만 이벤트가 실행된다