Throttle 와 Debounce란?

Throttle? Debounce?

scroll, resize, mouseup과 같은 이벤트가 발생할 때 발생하는 빈도를 줄이는, 성능 향상을 위한 개념입니다.

Throttle

Throttle는 일정 주기로 이벤트를 발생시키는 개념입니다.
예를 들어 주기를 1s로 설정한다면 resize를 아무리 해도 1s에 이벤트를 최대 한번만 발생 시킵니다.
일정 시간을 주기로 이벤트를 발생 시킵니다가 키포인트입니다.

Throttle 사용 예시

  const delay = 500;
  let throttled = false;
  window.addEventListener("resize", function () {
    if (!throttled) {
      throttled = true;
	  함수명();
      setTimeout(function () {
        throttled = false;
      }, delay);
    }
  });

위 코드는 resize 이벤트가 발생할 때, 0.5s 일정주기 별로 특정 함수가 발생 됩니다.

Debounce

Debounce는 이벤트 발생이 끝나는 시점에 이벤트를 한번만 발생시키는 개념입니다.
예를 들어 마우스로 화면을 resize하다 마우스에서 손을 뗄 때, 그 시점에 발생 시키는 개념입니다.
특정 시간동안 이벤트를 발생을 무시한다가 키포인트입니다.

Debounce 사용 예시

const delay = 500;
let debounceTimer;
window.addEventListener("resize", function() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(function() {
    함수명();
  }, delay);
});

위 코드는 resize 이벤트가 발생할 때, 함수 발생 후 0.5s 간은 함수 발생이되는 것을 무시합니다.

마치며

Throttle? Debounce?

두개의 개념 다 이벤트를 다룰 때 자주 사용되는 개념입니다.
일반적으로 어떤 상황일땐 뭐를 써야 된다 많이 정형화 되어있지만,
중요한것은 사용자 경험의 관점으로 이벤트들을 다루어야겠다 생각이 들었습니다.

*참고 문서

https://stackoverflow.com/questions/5489946/how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-action

https://webclub.tistory.com/607