디바운스(Debounce)와 스로틀(Throttle) 차이점

yes3427·2021년 9월 9일
0

JavaScript

목록 보기
1/13
post-thumbnail

어제 무한 스크롤을 구현하면서 공부했던 부분이다.
한번 더 개념을 짚고 넘어가보도록 하자😎

🤷‍♂️디바운스와 스로틀이 뭐야?

DOM 이벤트를 기반으로 실행하는 JavaScript를 성능을 고려하여 양적인 측면, 즉 이벤트를 제어(제한) 하는 방법이다.

예를 들어보면,
무한 스크롤을 구현할 때 사용자는 느끼지 못하지만 이러한 행위로 인해 수많은 스크롤 이벤트가 발생한다.
사용자가 아래로 5000픽셀 정도 스크롤 다운을 하면 100개 이상의 이벤트가 발생한다.
또한 이벤트에 대한 콜백(callback)이 발생하고 이 콜백이 수행하는 일은 매우 큰 리소스를 잡아먹는다.
정리해보면, 과도한 이벤트 횟수의 실행으로 성능 문제가 발생하고 사용자 경험까지 떨어뜨린다.

이러한 문제의 해결책이 바로 Throttle, Debounce 이다.
이벤트 핸들러가 많은 연산을 수행하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다.

사용 사례

  • 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event 사용하기 위해
  • 키보드 입력을 중지할 때까지 ajax 이벤트를 발생시키지 않기 위해
  • 페이지 스크롤 위치를 측정하고 최대 50ms마다 응답하기를 바랄 경우
  • 앱에서 요소를 드래그할 때 좋은 성능 보장을 위해

📗 디바운스(Debounce) 란?

이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술
순차적 호출을 하나의 그룹으로 그룹화할 수 있다.

예시

1. 리사이즈

데스크탑의 브라우저 창 크기를 조정하는 경우에 많은 크기 창 조정 이벤트를 내보낼 수 있다. 따라서 resize 이벤트에 대한 마지막을 추적한다.
왜냐하면 사용자는 크기를 조정하지 않은 최종 값에만 관심이 있기 때문이다.

2. Ajax 요청이 있는 자동 완성 양식의 키 누르기

검색을 위해 엔터 없이 결과를 즉시 보여주려면 항상 input 이벤트에 대기해야한다.
이러한 방식의 문제는 한 글자 칠 때마다 ajax 요청이 실행된다는 것이다.
이는 유료 API를 사용했을 때 큰 문제가 된다.
따라서 마지막 '제로초'를 다 쳤을 때 ajax 요청을 보낸다.

📘 스로틀 (Throttle) 란?

이벤트를 일정한 주기마다 발생하도록 하는 기술
예를 들어 Throttle 의 설정시간으로 1ms 를 주게되면 해당 이벤트는 1ms 동안 최대 한번만 발생하게 된다.

예시

무한 스크롤링 페이지

사용자가 footer 에서 얼마나 떨어져 있는지 확인해야하고 사용자가 맨 아래로 스크롤 했다면 Ajax 를 통해 더 많은 콘텐츠를 요청하여 페이지에 추가해야 한다.

디바운싱은 사용자가 스크롤을 멈출 때만 이벤트를 발생시키므로 디바운싱보다는 스로틀이 적합할 수 있습니다. 사용자가 footer 에 도달하기 전에 콘텐츠를 가져와야 하기 때문입니다.
throttle 을 통해 사용자 위치가 얼마나 footer 로 부터 떨어져 있는지 항상 확인할 수 있습니다.

📕 디바운스와 스로틀의 차이점

디바운싱과 스로틀의 가장 큰 차이점은 스로틀은 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장한다는 것이다.
디바운스는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법이다.
따라서 5ms 가 지나기전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시된다.

번외
과자를 사올까 말까 고민중이다아....
진짜진짜 먹고싶은데 너무 귀찮아 😐

Reference

https://webclub.tistory.com/607

profile
소비자가 아닌 생산자가 되자

0개의 댓글