디바운스와 쓰르톨링모두 웹에서 발생하는 이벤트를 제어하는 방법중 하나입니다.
예를 들어서 스크롤 이벤트의 경우 스크롤링을 할 때마다 발생하는데, 그 때마다 같은 작업을 실행하게 되면
성능 문제가 발생할 수 있습니다.
디바운스와 쓰로틀링을 적절한 상황에 사용한다면 그런 상황이 발생하지 않도록 방지할 수 있습니다.
두개의 용어가 약간 생소할 수 있는데 간단히 정의해보면
- 쓰르톨링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
- 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출되도록 하는 것
디바운싱 (Debouncing)
resize 이벤트 시 실행되야할 내용을 작업하면서 디바운스를 실제로 사용해보았습니다.
resize 이벤트는 브라우저의 크기를 줄이거나 늘리는 와중 계속 발생하는 이벤트인데 그 때마다
내부 로직이 실행되면 성능 상 문제가 발생할 수 있습니다.
그래서 dobounce를 사용해 이런 문제를 해결해 보았습니다.
// jquery를 사용하는 프로젝트
let timer;
$(window).resize(function() {
clearTimeout(timer);
timer = setTimeout(function() {
// 실행할 코드 내용
},200)
});
이벤트가 실행될 때마다 이전에 설정해준 내용을 clear시킨 뒤 다시 새로 timer를 설정해줍니다.
설정해둔 시간(여기서는 200ms) 내에 이벤트가 다시 발생하지 않으면 이벤트 발생이 끝난 것으로 생각해
적어둔 코드 내용이 실행됩니다.
let timer;
document.querySelector('#input').addEventListener('input', function(e) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// 실행할 코드 입력
}, 200)
}
쓰로틀링(Throttling)
쓰로틀링은 마지막 함수가 호출된 후에 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것입니다.
쓰로틀링은 주로 스크롤 이벤트에서 많이 사용되는 것 같습니다.
let timer;
document.querySelector('.body').addEventListener('scroll', function(e) {
if (!timer) {
timer = setTimeout(function() {
timer = null;
// 실행할 코드 입력
}, 200);
}
}
timer값이 없으면 timer를 설정해줍니다.
일정 시간이 지난 이후에는 스스로 타이머를 해체시킨 후에 작성한 내용을 실행시켜 줍니다.
두개의 차이점
디바운싱은 이벤트가 연속적으로 계속 발생하더라도 모든 사항을 무시하고 설정한 특정 시간동안에
이벤트가 발생하지 않았을 때 맨 마지막 이벤트를 딱 한번만 발생시키지만
쓰로틀링은 설정한 특정 시간 주기로 계속 실행이 됩니다. 따라서 실행 시키고 싶은 코드 내용은 실행이
되기는 합니다
.
참고 자료
'프론트 엔드 > Javascript' 카테고리의 다른 글
[Javascript] Object, key, values, entries, assign (0) | 2022.02.04 |
---|---|
[Javascript] Promise.all 이란? (0) | 2022.02.02 |
[Javascript] 자바스크립트 엔진, V8 (0) | 2022.01.30 |