Throttle? Debounce?

0hyo·2022년 1월 26일
0

이벤트 핸들러가 많은 연산(무거운 계산 및 기타 DOM 조작)을 수행(이벤트 핸들러의 과도한 횟수가 발생하는 것)하는 경우 제약을 걸어 제어하여 이벤트를 발생시키는 기술이다.

Throttle?

여러번 발생하는 이벤트를 일정 시간 동안, 한번만 실행 되도록 만드는 개념
일정한 주기마다 발생하도록 하는 기술
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

잦은 이벤트 발생을 막아 성능상의 유리함을 가져 올 수 있다.

어떤 성능상의 문제가 있을까?

스크롤 이벤트에 대한 콜백이 발생한다.
이벤트가 과도하게 발생하면 이벤트 핸들러가 무거운 계산 및 기타 DOM 조작과 같은 작업을 많이 수행하는 경우 선능 문제가 발생하고 사용자 경험까지 떨어뜨리게 된다.

Debounce?

여러번 발생하는 이벤트에서, 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 한다.
연이은 호출 함수들 중 가장 마지막(또는 제일 처음) 이벤트 만을 실행 되도록 만드는 개념

Throttle 와 Debounce 차이점

이벤트를 언제 발생시킬지 시점의 차이다.
Throttlex밀리 초마다 정기적으로 기능 실행을 보장하고
Debounce
는 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않을 때 딱 한번만 마지막 이벤트를 발생시킨다.

언제 사용할까?

  • resizing event
  • 사용자가 키보드 입력을 중지(예: 검색창) 할 때까지 ajax 이벤트를 발생시키지 않기 위해
    -(자동완성시) 인풋창에 검색을하고 api요청을 할 때 글자 하나마다 요청을 하게 되면 유료 api를 사용했을 때 손해이다.
  • 페이지의 스크롤 위치 측정, 무한스크롤 구현
  • 앱에서 요소를 드래그 할 때 좋은 성능을 보장하기 위해

무한스크롤에 어떻게 활용할까?

유저가 스크롤을 하면서 끝에 다다르면 API요청을 통해 데이터를 불러와 추가 해야한다.
자 그럼 여기서 디바운싱은 스크롤이 멈출 때만 실행이 되기 때문에 사용자가 푸터에 도달하기 전에 요청이 필요하다. Throttle을 통해 사용자의 위치가 푸터에서 얼마나 떨어져 있는지 확인 할 수 있기 때문에 무한스크롤에서는 Throttle을 사용하는게 더 유리하다.

출처: https://webclub.tistory.com/607 [Web Club]
출처: https://pks2974.medium.com/throttle-%EC%99%80-debounce-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2335a9c426ff

profile
행동하는 프론트엔드 개발자 되어가는 중 👊 파이팅!!

0개의 댓글