Frontend/JAVASCRIPT

JS - Throttle 와 Debounce

<zinny/> 2023. 2. 2. 16:36
728x90

왜 써야 하는데?

짧은 시간에 많은 이벤트가 발생하는 경우 이벤트 핸들러가 과도하게 호출되어서 성능의 문제를 발생시키기 때문에! 나아가 사용자 경험을 헤칠 수 있다

 

 

즉! 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해서 제약을 걸어 제어 할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 함!

 

Throttle

입력 주기를 방해하지 않고 일정시간 동안 입력을 모아서 한번에 출력을 제한

여러 번 발생하는 이벤트를 일정 시간 동안 최대 한 번만 실행되도록

이벤트 발생 시간 이후 일정 시간 동안만 기다리고 이벤트를 실행 후 재차 기다린다는 점

입력이 시작되면 일정주기로 게속 실행

예시 - 무한 스크롤

Debounce

입력 주기가 끝나면 출력

여러번의 이벤트에서 가장 마지막 이벤트만 실행되도록 만드는 개념

마지막 이벤트에서 일정 시간 동안 이벤트가 발생한다면 일정 시간을 기다린다

입력이 끝날때 까지 기다림

예시 - 실시간 검색어

728x90