Code&Data Insights
[Event Loop Handling Technique] Throttling과 Debouncing 본문
Web Development/Front-end
[Event Loop Handling Technique] Throttling과 Debouncing
paka_corn 2024. 4. 27. 13:42Throttling과 Debouncing 두 기법 모두 과도한 이벤트나 함수들의 빈도수를 줄여서 성능을 향상시킬 수 있다.
=> 과도한 이벤트 처리는 사용자 경험에도 비용에도 좋지 않음!
Throttling과 Debouncing의 차이점
Throttle
- 맨 처음 먼저 실행 -> 설정 시간 지난 후 다시 호출
- 설정 시간 내 최대 한번만 이벤트를 발생
(ex) 페이지에서 계속 전 날짜를 조회하는 버튼을 누르는 경우
처음 클릭때 실행되고 300초 뒤에 다시 실행
* 버튼을 누르고 있더라도 300초 마다 API 콜(실행) 됨.
Debounce
- 연이어 호출되는 함수 중 마지막 함수(또는 처음)만 호출 하도록 하는것
- 아무리 많은 이벤트가 발생하더라도 처음 or 마지막의 단 한번만 이벤트 발생!
(ex) 페이지에서 연속적으로 전 날짜를 조회하는 버튼을 클릭하는 경우
계속 클릭이 (이벤트가 일어나면) 마지막 클릭시에만 이벤트를 실행
* 중복 클릭 방지를 위한 다른 방법으로는
toggle 변수를 두고 한번 클릭 후에는 못하도록 막아두는 방법이 있음
(! 인터뷰 문제 자주 출몰 !)
'Web Development > Front-end' 카테고리의 다른 글
[Java Script] Asynchronous(비동기) Programming : Callback, Async/Await, Promise (0) | 2024.04.29 |
---|---|
[Redux] Redux, Flux Pattern (0) | 2024.04.28 |
[React] 컴포넌트(component), state, context API (0) | 2024.04.27 |
[Java Script] ECMAScript 5 & 6 (0) | 2024.04.22 |
[Web] 웹의 역사와 기본 개념 : HTML, CSS, JavaScript의 역할 (0) | 2024.04.05 |
Comments