POB_TIL 0520

이지훈·2022년 5월 20일
0

프리온보딩_TIL

목록 보기
14/22

디바운싱과 스로틀링

이번 프로젝트에서 중요하게 생각하는 부분은 api 호출을 최소화 하는것이었고 그것을 위해서는 로컬 캐싱도 있었지만 이벤트를 디바운싱, 스로틀링 처리를 해주는것도 중요했다.

디바운싱과 스로틀링은 짧은 시간에 엄청 많은 횟수가 실행되는 이벤트에 대해서 실행횟수를 조절하기 위한 방법으로 일정 시간동안 반복해서 실행되는 이벤트를 처리하지만 약간의 차이가 있다.

디바운싱

디바운싱은 지정된 시간 안에 이벤트가 또다시 발생하게 되면 이를 실행하지 않고 이벤트가 멈출 때 까지 보류한다. 그러다가 지정된 시간 동안 이벤트가 발생하지 않으면 그 때 이벤트를 실행한다.

스로틀링

스로틀링은 디바운싱과 비슷하지만 이벤트가 지정된 시간 안에 반복되면, 지정된 시간마다 이벤트를 실행한다.

이벤트를 계속 멈추지않고 실행할 때 디바운싱은 계속 실행하지않지만 스로틀링은 지정된 시간마다 실행하게 된다.

사용

실제 사용은 lodash를 많이 사용하는 것 같다. lodash에서 제공하는 debounce, throttle 함수에 원하는 함수를 콜백함수로 넘겨주고 시간을 설정해주면 적용된다.

내부 코드를 봤지만 모두 이해하진 못했고 가장 마지막에 발생한 이벤트 시간을 저장하고 계속해서 이벤트가 발생할 때마다 시간을 가져와 둘의 차이를 계산해 사용하는것같다.

debounce는 옵션으로 maxWait값을 주어 최대로 이벤트 발생을 막을 시간을 정할 수도 있고, throttle은 leading, trailling값을 true로 주어서 함수를 시작시간에 실행할지, 끝나는 시간에 실행할 지 정할 수 있다.

profile
안녕하세요! 대학교 졸업한 이지훈입니다.

0개의 댓글