![[Javascript] 디바운싱과 쓰로틀링 / 연속 이벤트 제어](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsY9q4%2Fbtq6PCsmU8O%2Fi6vRhGih5UYHwqPUzGpRsK%2Fimg.png)
디바운싱과 쓰로틀링은 모두 웹 페이지에서 발생하는 반복적인 이벤트를 제어해주는 방법이다.
반복적인 이벤트를 제어한다는 것은, 스크롤을 내리는 등의 수많은 반복 이벤트의 횟수를 현저하게 줄여주는 것을 의미한다.
1. 디바운싱: 맨 마지막에 발생한 이벤트만 처리!
2. 쓰로틀링: 이벤트가 한번 발생하면 일정 시간 락다운!
스크롤 이벤트를 예로 들어 디바운싱과 쓰로틀링 이벤트를 간단하게 구현할 수 있다.
<기본적인 스크롤 이벤트>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - onmouseover event</title>
<script src="./test.js"></script>
<style>
div {
height: 2000px
}
</style>
</head>
<body>
<div></div>
</body>
</html>document.addEventListener("scroll", () => {
const scrollValue = document.documentElement.scrollTop;
console.log(scrollValue);
})
위의 코드는 기본적인 스크롤 이벤트를 발생시키는 코드이고, 사진은 그 결과이다.
사진을 보면 알 수 있듯이 스크롤을 아주 조금만 움직이더라도 어마무시한 양의 이벤트가 발생한다.
이 지나치게 많은 이벤트들은 웹 페이지에 과부하를 일으킬 수 있으므로, 반드시 제어가 필요하다.
<디바운싱>
디바운싱은 위에서 말했듯, 맨 마지막에 발생한 이벤트만을 캐치하는 것이다.
구현방법은 다음과 같다
1. 우선 이벤트가 발생하면, timer가 존재하는지 확인한다.
2. timer가 기존에 존재할 경우, 새로운 timer를 만들어주기 위해 기존 timer를 삭제한다.
3. 새로운 timer를 만들어주고, 그 timer에 원하는 함수의 내용을 구현해준다.
쉽게 생각해서, 이벤트가 호출되었을 때마다 기존의 timer를 삭제하고, 새로운 timer를 등록하는 것이다.
// 디바운싱: 이벤트가 맨 마지막에만 발생하도록!
let timer;
document.addEventListener("scroll", () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
const scrollValue = document.documentElement.scrollTop;
console.log(scrollValue);
}, 500);
})
위의 사진을 보면 스크롤을 내린 양은 많은데 이벤트는 한번만 발생한 것을 볼 수 있다. 페이스북이나 인스타그램에서 스크롤을 내려 데이터를 새로 불러오는 부분이 이와 같은 기능을 사용해서 구현한 것이라고 볼 수 있다.
<쓰로틀링>
쓰로틀링은 이벤트가 한번 발생하면 일정 시간 동안은 발생하지 않도록 하는 것이다.
구현방법은 다음과 같다.
1. 이벤트가 발생하면, timer가 이미 존재하지 않는지 확인한다. 존재할 경우, 이벤트가 바로 종료된다.
2. timer가 존재하지 않으므로, 새로운 timer를 만들어준다. 내부 함수는 timer를 다시 null값으로 만들 수 있도록 구현한다.
쉽게 생각하면, timer가 하나 생성되어 대기중인 동안에는 이벤트 호출을 무의미하게 만들고, timer가 실행되고 나서야, 다시 새로운 타이머가 생길 수 있도록 해주는 것이다.
// 쓰로틀링: 이벤트가 한번 발생하면 일정 시간 동안은 발생하지 않음!
let timer;
document.addEventListener("scroll", () => {
if (!timer) {
timer = setTimeout(() => {
timer = null;
const scrollValue = document.documentElement.scrollTop;
console.log(scrollValue);
}, 500);
}
})
사진을 보면 알 수 있듯, 쓰로틀링은 디바운싱과 다르게 이벤트가 여러번 호출된다. 하지만 일정 시간에 한번씩만 호출되므로, 기본적인 이벤트 리스너보다는 훨씬 양호한 결과를 냄을 볼 수 있다.
디바운싱과 쓰로틀링은 둘 다 연속적인 이벤트 제어에 효과적인 기술이다. 일반적으로 디바운싱은 ajax 검색에 사용되며, 쓰로틀링은 스크롤 조작에 사용되는 기능이긴 하나, 둘은 각각 다른 특징을 가진 기능으로, 상황에 따라 잘 섞어서 사용해야할 것이다.
<참고>
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa
'Language > JS' 카테고리의 다른 글
| [Javascript] KeyboardEvent.key / 키보드 이벤트 (0) | 2021.08.31 |
|---|---|
| [Javascript] 자바스크립트 문자열 뒤집기 (0) | 2021.06.15 |
| [Javascript] Map 사용법 (0) | 2021.06.08 |
| [Javascript] 일반 함수 vs 익명 함수 (4) | 2021.05.28 |
| [Javascript] for 반복문 종류 ( for / for-in / for-of ) (0) | 2021.05.10 |