[JavaScript] 디바운싱(Debouncing)과 쓰로틀링(Throttling)

멋진감자·2024년 11월 30일

JavaScript

목록 보기

12/13

개념

디바운싱: 빈번하게 발생하는 이벤트를 특정 시간 이후에 한 번만 실행시키는 최적화 기법
쓰로틀링: 빈번하게 발생하는 이벤트를 일정한 간격으로 한 번만 실행시키는 최적화 기법

여기서 말하는 '빈번하게 발생하는 이벤트'의 예로써 검색어를 입력하는 상황을 들 수 있다.
'멋진감자'를 검색하려고 한다면 'ㅁ', '머', '멋', '멋ㅈ', '멋지', '멋진', '멋진ㄱ', '멋진가', '멋진감', '멋진감ㅈ', '멋진감자' 의 과정을 거쳐,
하나의 단어를 타이핑하기 위해 총 11번의 쿼리를 날리게 된다.
유료 API를 사용하고 있다면 비용면에서 문제가 생길 수 있고, 당연히 성능에도 좋지 않은 영향을 끼칠 것이다.

이러한 문제에 대한 대표적인 해결 방법이 디바운싱과 쓰로틀링이다.

디바운싱(Debouncing)

회로를 구성할 때, 전압이 순간적으로 불규칙하게 들어가는 현상을 바운싱 현상이라고 한다.
이 바운싱 현상이 발생하는 시간만큼의 딜레이를 주어 문제를 해결하는 방법인 디바운싱에서 유래되었다.

구현

서론에 언급한 검색어 입력 상황에 디바운싱을 적용해보자.
사람들은 보통 검색어를 입력할 때 한번에 타이핑한다.
따라서 input 이벤트가 발생할 때마다 타이머를 설정하고, 일정 시간동안 입력이 없으면 입력이 끝난 것으로 간주하면 된다.
설정한 시간이 지나기 전에 입력이 발생하면, 그 전에 발생한 타이머는 취소하고 새로운 타이머를 재설정하도록 구현할 수 있다.

const delay = 200;
let timer;

document.querySelector("#input").addEventListener("input", function (e) {
  clearTimeout(timer);
  timer = setTimeout(() => {
    console.log("디바운싱이지요", e.target.value);
  }, delay);
});

쓰로틀링(Throttling)

쓰로틀링은 엔진의 연료를 조절하는 데 사용되는 레버인 Throttle이라는 단어에서 유래되었다.
위에서 언급했듯이, 실행 횟수에 제한을 거는 것이기 때문에 스크롤이 일어날 때 발생하는 이벤트 처리 등 성능 문제를 해결할 때 많이 사용한다.

구현

검색 기능에는 쓰로틀링보다 디바운싱이 더 적합해 보이지만,
중간에 검색 결과를 보여주는 기능이 필요하다면 쓰로틀링도 활용할 수 있겠다.

이번엔 타이머가 설정되어 있으면 아무 동작도 하지 않고, 타이머가 없다면 타이머를 설정한다.
타이머는 일정 시간 후에 스스로를 해제하고, 검색어를 처리하도록 구현하면 된다(console 부분).

const delay = 200;
let timer;

document.querySelector("#input").addEventListener("input", function (e) {
  if (!timer) {
    timer = setTimeout(function () {
      timer = null;
      console.log("쓰로틀링이네요", e.target.value);
    }, delay);
  }
});