에딧터 프로젝투를 하면서 디바운스에 대한 것을 배웠음.
무엇인지 간단 정리를 함.

디바운스

디바운스는 일정 시간동안 여러 번의 요청이 들어와도 한 번만 실행하는 것임.

사용법

//기본 틀 
let timer: any;
const listener = () => {
  // 이미 존재하면 클리어
  if (timer) {
    clearTimeout(timer);
  }
  // 다시 시작
  timer = setTimeout(() => {
 	//실행 시켜주고 싶은 것.
  }, 1000);
};


// js에서 이벤트 리스너로 넣고 싶다면.
const debouncer = (cb, delay) => {
  let timeout;
  return (...args) => { 
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      cb();
    }, delay);
  };
};
button.addEventListener(
  'click',
  debouncer((e) => {
    console.log('You Clicked me')
  }, 2000)
);


// react에서 useEffect 활용
useEffect(() => {
  const timer = setTimeout(async () => {
    const output = await bundle(input);
    setCode(output);
  }, 1500);
  // 유저가 입력할 때마다 이전의 타이머는 없어지고 다시 시작해야 됨.
  // -> input이 변경될 때 마다 timer는 실행될 것임.
  // -> 변경 멈추면 2초 후에 timer가 시작됨. 그리고 timer를 clean시킴.
  return () => {
    // useEffect가 다시 실행 되면(input이 바뀌어서) 익명 함수가 자동으로 시작됨.
    clearTimeout(timer);
  };
}, [input]);