디바운스 구현하기

갑자기! 디바운스가 생각나서 코드 샌드박스를 열어 디바운스를 구현해봤다.

input에 text를 입력하면 정해진 시간 안에 다른 입력이 없다면 콘솔에 text를 띄운다.

const input = document.querySelector("#app"); // HTMLInputElement

function debounce(time, fn) {
  let timer = null;
  return (e) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      const text = ("디바운스 체크", e.target.value);
      fn(text);
    }, time);
  };
}

function showText(value) {
  console.log(value);
}

const inputHandler = debounce(1000, showText);

function main() {
  input.addEventListener("input", inputHandler);
}

main();

Share this post