디바운싱 (Debouncing)
연이어 호출되는 함수들 중 마지막 함수만 호출되도록 하는 것 (입력이 끝날 때 한 번)
디바운싱은 최종 결과가 중요한 경우 사용한다.
예를 들어 ajax 요청이 있다.
<input id='input' />document.querySelector('#input').addEventListener('input', function(e) {
console.log('입력 내용: ', e.target.value);
});입력 내용: ㅁ
입력 내용: 미
입력 내용: 민
입력 내용: 미ㄴ
입력 내용: 미니
입력 내용: 미니ㄸ
입력 내용: 미니또위 코드는 한 글자 칠 때마다 ajax 요청이 실행된다.
'ㅁ', '미ㄴ'와 같은 요청은 제대로 된 검색 결과도 나오지 않을 것이다.
만약 유료 API를 사용하면 많은 요청은 높은 비용을 요구할 것이다.
이때 사용하는 것이 디바운싱(Debouncing)이다.
var timer;
document.querySelector('#input').addEventListener('input', function(e) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
console.log('입력 내용: ', e.target.value);
}, 1000);
});입력 내용: 미니또타자를 칠 때 setTimeout으로 타이머를 설정한다.
위의 예시는 1초 동안 다른 입력이 없으면 입력이 끝난 것으로 가정한다. 이렇게 타이머를 설정하면 더 이상 여러 번 호출하지 않고, 지정한 시간 동안의 마지막 한 번만 호출하게 된다.
쓰로틀링 (Throttling)
마지막 함수가 호출된 후 일정 시간이 지나기 전까지 다시 호출되지 않도록 하는 것 (특정 시간 안에 한 번)
쓰로틀링의 가장 대표적인 예가 스크롤이다.
스크롤을 동작할 때 scroll 이벤트가 매우 많이 발생한다. 빈번하게 실행되는 문제를 막기 위해 쓰로틀링을 사용한다. 특정 시간에 한 번씩만 실행되게 제한을 두는 것이다.
var timer;
document.querySelector('#input').addEventListener('input', function(e) {
if(!timer) {
timer = setTimeout(function() {
timer = null;
console.log('입력 내용: ', e.target.value);
}, 1000);
}
});
입력 내용: 미
입력 내용: 미니
입력 내용: 미니또위의 코드에서 쓰로틀링을 사용하면 최소 1초마다 요청을 보낸다.
중간 검색 결과를 보여주고 싶다면 쓰로틀링을 사용한다.
디바운싱과 쓰로틀링의 차이점
디바운싱과 쓰로틀링의 가장 큰 차이점은 쓰로틀링은 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장한다는 것이다.
디바운싱은 아무리 많은 이벤트가 발생해도 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시킨다. 따라서 특정 시간이 지나기전에 계속 이벤트가 발생할 경우 콜백에 반응하는 이벤트는 발생하지 않고 계속 무시된다. 반면, 쓰로틀링은 일정한 시간 간격으로 호출이 되기 때문에 중간 과정을 살펴보고 싶을 때 주로 사용한다.
