자바스크립트 - 함수 호출 지연 시키는 debounce 구현하기

debounce란?

 

검색을 할 때, 검색어를 추천하는 기능이 있습니다.

하지만, 모든 음절마다 검색을 하게 되면 과도하게 많은 API가 발생할 수 있습니다.

 

일정 시간이 지날 때까지 함수 호출을 지연시키는 방법을 debounce라고 합니다.

debounce 구현하기

<input id="serach" type="text" onkeyup="onKeyup()" />

const debounce = (func, delay = 300) => {
  let timer;

  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func();
    }, delay);
  };
};

const getData = () => {
  const ul = document.getElementById('content');
  const li = document.createElement('li');
  li.innerHTML = 'getData';
  ul.appendChild(li);
}

const onKeyup = debounce(() => getData());

 

debounce가 호출되면, setTimeout이 동작하여 함수가 지연됩니다.

함수 실행 이전에, 다시 debounce 함수가 호출되면 이전에 setTimeout 동작은 clearTimout으로 취소되고,

다시 setTimeout으로 지연됩니다.

결과물