[Javascript] debounce & throtle

Intro

자바스크립트에서 이벤트로 다룰 때는 어느정도 자원을 아껴야하는 경우가 있습니다. 예시로 검색의 자동완성 기능의 경우 우리의 눈에는 보이지 않는 ajax를 호출하면서 서버와 통신을 하고 있습니다.

검색창에 입력을 할 때마다 수 많은 API가 호출되고 있는 것을 확인할 수 있습니다. 이렇게 키가 입력될 때마다 서버에 불필요한 호출이 될 수 있는 것입니다.

1. debounce

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);
  };
}

2. throtle

과거에 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을 이용해 이벤트를 최적화시켜 사용할 수 있습니다. 보통의 라이브러리에서는 로데쉬에서 많이 활용하는 편이기 때문에 만약 사용이 궁금하다면 로데쉬 코드를 살펴보는 것을 권장드립니다.