타이머

디바운스

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

  let debounceTimer;

  window.addEventListener('resize', (e) => {
    if (debounceTimer) clearTimeout(debounceTimer);

    debounceTimer = setTimeout(() => {
      console.log('[resize]', e);
    }, 3000);
  });

쓰로틀

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

  let throttleTimer;

  window.addEventListener('resize', (e) => {
    if (!throttleTimer) {
      throttleTimer = setTimeout(() => {
        throttleTimer = null;
        console.log('[resize]', e);
      }, 3000);
    }
  });

디바운스와 쓰로틀의 차이점

디바운싱과 스로틀의 가장 큰 차이점은 스로틀은 적어도 X 밀리 초마다 정기적으로 기능 실행을 보장한다는 것입니다.
Debounce 는 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시키는 기법입니다.

참고

모던 자바스크립트 Deep Dive
디바운스, 쓰로틀
디바운스, 쓰로틀 차이점