Debounce, Throttling

Debounce

 

기계적 스위치 센서나, 터치 센서같은것을 다룰 때, 순간적으로 스위치의 접점에서 on/off가 여러 번 반복되는 현상이 있는데,

이를 바운싱 현상이라고 한다.

이런 바운싱 현상을 없애는 것이 바로 디바운싱이다.

Debounce는 이벤트를 그룹화 하여 특정 시간이 지난 후, 하나의 이벤트만 발생하도록 하는 기술이다.

즉, 순차적으로 호출을 하나로 '그룹화'할 수 있다. 그레서 연속적으로 호출되는 함수 중 마지막 함수 또는 제일 처음만 호출할 수 있다.

debounce는 보통 ajax(asynchronous javascript and XML) 요청에 사용된다.

 

let debounce;
const $searchInput = document.querySelector("#input");
$searchInput.addEventListener("input", onSearchInputHandler);

const onSearchInputHandler = (e) => {
  if (debounce) {
    clearTimeout(debounce);
  }
  debounce = setTimeout(() => {
    console.log("ajax 요청 부분", e.target.value);
  }, 3000);
};

 

 

위와 같이 사용하면 input에서 값을 입력할때, 더이상 여러번 호출되지 않고, 사용자가 입력하지않고 3초를 기다린후 ajax요청을 보내게 된다.

 

Trottle

 

Throttle의 사전적 의미는 목을 조르는 행위이다. 여기서는 무언가의 출력을 조절하는 뜻도 가지고 있어, 기계 장치에 연결된 액체나 기체가 흐르는 관에 달린 밸브를 조절하는 과정에서도 이 단어가 사용된다.

출력을 조절하는 throttle은 이벤트를 일정한 주기만다 발생하도록 하는 기술이다.

예를 들어서 throttle의 설정 시간으로 1ms를 주게되면, 해당 이벤트는 1ms동안 최대 1번만 발생하게 된다.

즉, 마지막 함수가 호출된 후, 일정 시간이 지나기 전에 다시 호출되지 않도록 해야한다.

주로 스크롤 이벤트에 사용된다.

 

let throttle;
const $searchInput = document.querySelector("#input");
$searchInput.addEventListener("input", onSearchInputHandler);

const onSearchInputHandler = (e) => {
  if (!throttle) {
    throttle = setTimeout(() => {
      throttle = null;
      console.log("ajax 요청 부분", e.target.value);
    }, 300);
  }
};

 

 

즉,

디바운스는 여러번 발생하는 이벤트에서, 가장 마지막 또는 제일 처음 이벤트만을 실행되도록 만드는 개념이다.

=> 연이어 호출되는 함수들 중 마지막 함수 또는 제일 처음만 호출되도록 하는 것.

쓰로틀링은 여러번 발생하는 이벤트를 일정 시간 동안, 한 번만 실행되도록 만드는 개념이다.

=> 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것.