디바운스

디바운스란 맨 마지막에 호출되는 이벤트만 실행시키는것을 말한다.

그렇다면 이를 어떻게 구현할까?

  $target.addEventListener("keyup", (e) => {
		debounce(e.target.value);
  });

메인에서는 이렇게 별도로 디바운스 함수로 호출해주자! 이렇게 하면 코드가 더 깔끔해진다.

debounce.js

let timer;
export const debounce = (value) => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    console.log("input 요청이 들어왔습니다.", value);
  }, 2000);
};

1. timer을 밖에다가 선언해준다. 안에다가 선언할 경우, event가 발생할때마다 debounce가 호출되는데, 이때마다 timer가 초기화되기 때문에 제대로된 로직을 구현할 수 없다. 따라서 debounce함수 밖에다가 선언해준다.
2. 마지막 이벤트에서만 동작을 해야하므로 setTimeout을 통해 이벤트를 지연시킨다.
3. 이벤트가 계속 발생한다면, timer가 있으므로 clearTimeout이 실행되며 setTimeout이 초기화된다.
4. 마지막 이벤트가 발생한다면 2초되에 이벤트가 실행된다.

쓰로틀링

이벤트가 계속 발생한다면 몇초에 한번만 실행되도록 횟수에 제한을 주는것이다.

let timer;
export const throttle = (value) => {
  if (!timer) {
    timer = setTimeout(() => {
      timer = null;
      console.log("input 요청이 들어왔습니다.", value);
    }, 2000);
  }
};

• 횟수에 제한을 두어야하는것이므로 이벤트가 실행된 다음 timer를 초기화 시켜준다.
• 이렇게 한다면, setTimeout시간동안은 timer가 있기 때문에 추가적인 이벤트가 발생하지 않는다.