🤡디바운스란?
자바스크립트에서 디바운스는 이벤트를 그룹화하여 제일 처음 or 제일 마지막 함수만 호출되도록 하는 것을 말합니다.
제일 처음 함수만 호출되는 형식으로 구현한 것을 leading edge
가장 마지막 함수만 호출되는 형식으로 구현한 것을 trailing edge라고 부릅니다.
보통 일정 주기 동안 이벤트가 입력되고나서 일정 시간 동안 다른 이벤트가 발생하지 않은 경우
이벤트를 실행시키는 형식으로 디바운스를 구현합니다.
이러한 디바운스는 성능최적화와 큰 연관성을 가지고 있습니다.
알아두면 손해볼것 없으니 간단하게
자바스크립트로 디바운스를 구현하는 코드를 작성해보겠습니다.
우리가 만들어볼 웹페이지입니다.
숫자를 카운팅해줄 태그와 디바운스를 실습해볼 버튼 하나만 있는
간단한 웹페이지입니다. 다음과 같이 구성해주면 되겠습니다.
html 구성
<body>
<h2 class="text"></h2>
<button class="hi">디바운스 해보자</button>
<script src="./debounce.js"></script>
</body>html파일을 하나 만들어주고 다음과 같이 작성해줍니다.
html과 동일한 폴더에 debounce.js 파일을 생성해주겠습니다.
/debounce.js
const hi = document.querySelector('.hi');
const h2 = document.querySelector('.text');
const debounce = (callback, delay = 500) => {
let timer;
return (e) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
callback(e);
}, delay);
};
};
const onClick = () => {
let count = 0;
return () => {
count += 1;
h2.textContent = count;
console.log('count가 이래요', count);
};
};
const clickCloser = onClick();
hi.addEventListener('click', debounce(clickCloser));debounce를 구현하는 간단한 코드입니다.
디바운스와 onClick함수 모두 클로저로 구현해줬습니다.
debounce 코드를 해석하면 다음과 같습니다.
const debounce = (callback, delay = 500) => {
let timer;
// 클로저로 사용하기 위해 timer 변수를 외부함수에 선언해줍니다.
return (e) => { // 클로저로 사용해야하니 함수를 반환시킵니다.
if (timer) {
clearTimeout(timer);
}
// 만약 timer가 falsy하지 않다면 setTimeout을 clear시킵니다.
timer = setTimeout(() => {
callback(e);
}, delay);
// timer에 setTimeout함수가 반환하는 Timer Id를 할당해줍니다.
};
};타이머가 한번도 설정되지 않았을 때에는
선언만 한 timer 변수에는 undefined라는 falsy값이 할당되어있기 때문에
if문에서 처리되지 않고(setTimeout이 clear 되지 않고) 일정시간이 지나면 실행되게 됩니다.
반면 이미 이벤트가 실행되기를 기대하고있는 상태라면 timer 변수에는
이전 이벤트에서 setTimeout함수가 반환한 timer id가 담겨있기때문에
if문에 해당하게되고 이전 이벤트의 setTimeout은 clear됩니다.
이것을 통해 간단하게 trailing edge 방식의 디바운싱 함수를 만들 수 있습니다.
'cheetsheet' 카테고리의 다른 글
| 리액트로 회원가입 로직 만들어보기 (0) | 2023.06.22 |
|---|---|
| node-sass 설치 에러 해결 방법과 원인.. (0) | 2023.04.16 |
| length 프로퍼티 없이 이터레이터로 Each 구현하기 (0) | 2023.03.17 |
| 콜백으로 준식 지옥을 만들어보자 (8) | 2023.03.16 |
| reset.css 인풋,버튼 태그의 배경 바꾸기와 placeholder 글자 색 바꾸기 (0) | 2023.03.04 |
