자바스크립트에서 이벤트로 다룰 때는 어느정도 자원을 아껴야하는 경우가 있습니다. 예시로 검색의 자동완성 기능의 경우 우리의 눈에는 보이지 않는 ajax를 호출하면서 서버와 통신을 하고 있습니다.
검색창에 입력을 할 때마다 수 많은 API가 호출되고 있는 것을 확인할 수 있습니다. 이렇게 키가 입력될 때마다 서버에 불필요한 호출이 될 수 있는 것입니다.
debounce
는 이벤트 발생이 많을 때 가장 마지막 이벤트만을 실행시켜줌으로서 이용하면 불필요한 API호출을 줄여주고 최적화를 시켜 수 있습니다. 또한 실행시점은 밀리세컨드로 조절을 하게 됩니다.
let i = 0;
document.querySelector('input').addEventListener(
'keyup',
debounce(() => {
i = i + 1;
console.log(i);
}, 500),
);
function debounce(callback, wait) {
let timeout; // 초기 undefined
// 함수가 호출시 매번 반환
return function (...args) {
const context = this;
// 타이머를 취소시켜준다.
clearTimeout(timeout);
timeout = setTimeout(() => callback.apply(context, args), wait);
};
}
과거에 API가 Ajax호출 후 통하지 않던 싱글페이지 어플리케이션이 없던 시기에는 웹이 어떻게 동작을 했을까요? 그 때는 page형태의 모바일이 많았습니다. 이 후에는 스크롤이 끝까지 가면 더보기 버튼을 눌러 다음 페이지를 보는 형식으로 발전하기도 했습니다.
요즘 새로 사용되는 무한스크롤이라는 개념이 있습니다. 특정 스크롤을 내리면 계속해서 특정 정보가 추가적으로 등장하는 것입니다. 카카오쇼핑하기
이 때 throtle
기법을 활용하면 좋습니다. 이벤트 발생이 많을 때 특정 밀리세컨드동안 이벤트를 차단하고 단 한번만 실행시킴으로써 자원을 아낄 수 있도록 도와줍니다.
코드 예시를 살펴보도록 하겠습니다.
<div style="background-color: red"><h2>1</h2></div>
<div style="background-color: orange"><h2>2</h2></div>
<div style="background-color: yellow"><h2>3</h2></div>
<div style="background-color: green"><h2>4</h2></div>
<div style="background-color: blue"><h2>5</h2></div>
<div style="background-color: navy"><h2>6</h2></div>
<div style="background-color: violet"><h2>7</h2></div>
let i = 0;
window.addEventListener(
'scroll',
throttle(() => {
i = i + 1;
console.log(i);
}, 1000),
);
function throttle(callback, wait) {
let timeout = null;
return function (...args) {
const context = this;
if (!timeout) {
timeout = setTimeout(() => {
callback.apply(this, args);
timeout = null;
}, wait);
}
};
}
이렇게 debounce
와 throtle
을 이용해 이벤트를 최적화시켜 사용할 수 있습니다. 보통의 라이브러리에서는 로데쉬에서 많이 활용하는 편이기 때문에 만약 사용이 궁금하다면 로데쉬 코드를 살펴보는 것을 권장드립니다.