디바운싱과 쓰로틀링 적용하기

디바운싱과 쓰로틀링 개념은 lodash, underscore, redux-saga 등 여러 라이브러리에서 해당 기능을 지원하고 있다.

디바운싱

연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것

주로 ajax 검색에 쓰인다

검색기능에 디바운스 개념 적용하기

검색창에 타이핑을 칠 때마다 검색이 수행되는 기능을 구현하려고 한다.
해당 이벤트에 디바운싱을 적용하지 않으면 타이핑을 칠때마다 모든 비동기 요청이 실행된다.
서버에 부하를 주는 행위이고 타이핑을 치는 도중에 검색결과가 바뀌면서 사용자 경험에서 좋지 않을수 있다.

redux-saga에서 지원하는 debounce 메서드를 이용해 연속된 요청 중 마지막 요청을 받고, 그 이후의 요청은 0.5초 동안은 실행하지 않도록 하였다.

실행결과 타이핑이 끝난 시점에서 검색 결과가 적용되는것을 볼 수 있다.

쓰로틀링

함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

주로 스크롤 이벤트에 사용된다.

스크롤 이벤트에 쓰로틀링 적용하기

스크롤 이벤트는 픽셀단위로 이벤트가 일어나기 그대로 스크롤 이벤트를 적용하면 성능에 문제가 생길 수 있다. 따라서 쓰로틀링을 적용에 일정 시간 간격으로 이벤트 핸들러가 실행되도록 하는것이 좋다.

일정 높이로 스크롤을 내릴경우 탑스크롤 버튼이 화면위에 나타나도록 애니메이션을 구현했다.

쓰로틀링을 적용하지 않았을 때의 이벤트 핸들러 호출

쓰로틀링을 적용했을 때의 이벤트 핸들러 호출