디바운스와 쓰로틀링 모두 웹에서 발생하는 이벤트를 제어하는 방법이다.
예를 들어 스크롤 이벤트의 경우 스크롤링 할 때마다 발생하는데, 그 때마다 같은 작업을 실행하게 되면성능 문제가 발생할 수 있다.디바운스와 쓰로틀링을 적절한 상황에서 사용하여 그런 상황이 발생하지 않도록 막을 수 있다!
디바운싱 (Debouncing)
연속으로 호출되는 함수들 중에 마지막에 호출되는 함수(또는 제일 처음 함수)만 실행되도록 하는 것
최근, 브라우저 resize 이벤트 시 실행되어야 하는 내용을 작업하면서서 디바운스를 실제로 사용해보았다.resize 이벤트는 브라우저의 크기를 줄이거나 늘리는 와중에 계속 발생하는데 그 때마다 내부 로직이 실행되면 성능 상의 문제가 생길 수 있다.그래서 debounce를 사용하게 되었다.
// jquery를 사용하는 프로젝트였음
let timer;
$(window).resize(function() {
clearTimeout(timer);
timer = setTimeout(function() {
// 실행할 코드 내용
},200)
});
이벤트가 발생할 때마다 이전에 설정해둔 내용을 clear시키고 다시 새로 timer를 설정해준다.설정해둔 시간(여기서는 200ms) 내에 이벤트가 다시 발생하지 않으면 이벤트 발생이 끝난 것으로 생각해서 적어둔 코드 내용이 실행된다.
검색해봤을 때 ajax 검색에서 디바운싱을 많이 사용하는 듯 싶다.
var timer;
document.querySelector('#input').addEventListener('input', function(e) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// 실행 코드 내용
}, 200);
});쓰로틀링(Throttling)
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
쓰로틀링은 주로 스크롤 이벤트에서 많이 사용하는 것 같다.
var timer;
document.querySelector('.body').addEventListener('scroll', function (e) {
if (!timer) {
timer = setTimeout(function() {
timer = null;
// 실행할 코드 내용
}, 200);
}
});timer에 값이 없으면 timer를 설정해준다.일정 시간이 지난 후에는(위에서는 200ms) 스스로를 해제시킨 후 작성한 내용을 실행시킨다.
차이점
디바운싱은 이벤트가 연속적으로 계속 발생하더라도 모두 무시하고 설정한 특정 시간동안 이벤트가 발생하지 않았을 때 맨 마지막 이벤트를 딱 한번 발생시키지만 쓰로틀링은 설정한 특정 시간 주기로 계속 실행이 된다. 따라서 실행 시키고 싶은 코드 내용이 실행이 되긴 한다.(특정 시간 주기로)
