디바운싱(debouncing)

자바스크립트에서의 디바운싱은 마지막으로 발생한 이벤트를 기준으로 특정 time이 지난 후 하나의 이벤트만 실행되도록 한다.

 

디바운싱을 적용하면 좋은 예시로는 검색 기능의 키 이벤트(input)가 있다.

 

검색 버튼을 누르지 않아도 사용자가 입력한 값이 변경될 때마다 자동으로 검색 요청을 보내는 기능을 만든다고 한다면, 사용자가 검색어를 다 입력하지 않았을 때에도 요청이 보내지게 되므로 비효율적이다.

 

이러한 경우에 디바운싱을 적용하면 사용자의 입력이 끝나고 일정 시간이 지난 후에 검색 요청이 1번만 보내지므로 성능을 향상시킬 수 있다.

 

const inputEl = document.querySelector('#inputName');

let timeout;

function handleAlert() {
  const inputValue = inputEl.value;

  if (timeout) {
    clearTimeout(timeout);
  }

  timeout = setTimeout(() => {
    alert(`입력된 이름: ${inputValue}`);
  }, 1000);
}

inputEl.addEventListener('input', handleAlert);

 

디바운싱을 구현하기 위해서는 setTimeout 함수와 time(기준시간)이 필요하다.

 

이벤트가 발생할 때마다 timeout 변수에 콜백 함수를 반환하는 setTimeout 함수를 값으로 할당한다.

 

time 이내에 새로운 이벤트가 발생할 때마다 timeout을 초기화 해준다고 이해하면 된다.

 

time 이내에 새로운 이벤트가 발생한다면 clearTimeout을 해줌으로써 콜백 함수는 실행되지 않으며, 발생하지 않으면 setTimeout은 콜백 함수를 실행되게된다.