디바운싱
연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용된다.
아래는 현실에서의 간단한 예시 이다.
손님이 레스토랑에서 콜라따로 스테이크따로 파스타 따로 시키면 직원 3번을 왔다갔다 해야한다.
여기서 디바운싱을 적용시키면 콜라,스테이크,파스타를 한번에 주문 받을시 직원은 1번만 왔다갔다 할수 있으므로 효율적이다.
이번에는 프로그래밍에서의 예시 이다.
아래는 디바운싱 적용전으로 input에 텍스트를 입력할때마다 요청을 보내게 된다.
<input id="input" />
<script>
document.querySelector('#input').addEventListener('input', function (e) {
console.log(e.target.value);
});
</script>
위와 같은 상황을 실제 API요청이라고 가정해보면 서버에 수많은 요청이 가서 과부하가 걸릴수도있고 만일 외부 API를 이용중이라 한 번 요청에 일정 금액이 청구되는 구조라면 많은 비용이 발생하게 된다.
이러한 문제를 해결하기 위해 디바운싱을 사용한다. 아래는 디바운싱을 적용한 예시 이다.
<input id="input" />
<script>
let timer;
document.querySelector('#input').addEventListener('input', function (e) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
console.log(e.target.value);
}, 300);
});
</script>
위 방식은 input이벤트 발생마다 타이머를 설정한다. 300ms동안 입력이 없으면 입력이 끝난 것으로 가정한다. 300ms 이전에 타자 입력이 발생하면 이전 타이머는 취소하고 새로운 타이머를 다시 설정하는 것이다.
디바운싱 정리
- 웹에서 주로 ajax 검색에 자주 쓰인다.
- 주로 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용된다.
- leading edge : 연속적으로 들어오는 입력 가운데 처음의 입력만 실행한다. (쓰로틀링과 유사하게 작동함)
- trailing edge : 연속적으로 들어오는 입력 가운데 마지막 입력만 실행한다.
쓰로틀링
출력을 조절한다는 라는 의미로 이벤트를 일정주기마다 발생하도록 하는 기술이다.
설정 시간으로 300ms를 주게된다면, 해당 이벤트는 300ms동안 최대 한번만 발생하게 된다. 즉 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 한다.
아래는 현실에서의 간단한 예시 이다.
손님이 레스토랑에서 칵테일 한잔을 주문후 15분뒤 추가 주문했을경우 30분후(주문 가능시간이 30분 간격이라는 가정하에)에 주문이 가능하다고 안내드린후 30분뒤에 주문을 다시 받는다고 생각하면된다.
이번에는 프로그래밍에서의 예시 이다.
아래는 쓰로틀링 적용전으로 쓰로틀링은 주로 scroll이벤트에서 쓰인다.
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
<script>
let number = 0;
document.addEventListener('scroll', function (e) {
number++;
console.log(number);
});
</script>
위와 같이 scroll이벤트가 발생할때 뭔가 복잡한 작업을 하도록 설정했더라면 배우 빈번하게 실행되기 때문에 엄청 렉이 걸릴 것이다. 그럴때 쓰로틀링을 걸어준다. 아래는 쓰로틀링을 적용한 예시 이다.
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
<script>
let number = 0;
let throttler;
document.addEventListener('scroll', function (e) {
if (!throttler){
throttler = setTimeout(() => {
number++;
console.log(number);
throttler = null;
}, 300);
}
});
</script>
setTimeout을 이용하여 타이머를 통째로 임의의 변수 throttler에 넣었다. 위 코드의 경우 0.3초 동안은 이벤트를 잠궈 한 번만 실행되도록 하였고, 0.3초 후에 throttler는 null로 초기화 되고 함수가 실행된다. 따라서 0.3초간은 임의의 변수 throttler에 타이머가 있기 때문에 스크롤 이벤트가 발생하더라도 무시된다.
쓰로틀링 정리
- 주로 성능개선을 위하여 사용된다. (무한 스크롤)
- 이벤트를 일정주기마다 발생하도록 하는 기술이다.
디바운스와 쓰로틀링의 차이
쓰로틀링은 적어도 정한 시간 이후에는 실행을 보장하지만 디바운스는 이벤트가 실행 중일 때는 실행하지 않고, 특정 시간 사이에 이벤트가 발생되지 않았을 때 마지막 한 번(혹은 제일 처음) 실행 하는 것이다. 그래서 만약에 3초의 시간을 지정하고 그 시간 동안 지속적으로 이벤트가 발생할 경우, 그 사이의 호출은 모두 무시된다.
