자바스크립트 - 일정한 시간 간격으로 함수 호출하는 쓰로틀링(throttling) 구현하기

쓰로틀링(throttling) 이란?

일정한 시간 간격으로 함수를 호출하는 방법입니다.

주로 스크롤 이벤트, 마우스 이동 등에서 사용하는 방법입니다. 

 

쓰로틀링(throttling) 구현하기

function throttle(func, delay) {
  let timeoutId;
  return function() {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func();
        timeoutId = null;
      }, delay);
    }
  };
}

 

쓰로틀링(throttling) 예시

 

디바운스(debounce) vs 쓰로틀링(throttling)

디바운스

• 마지막으로 발생한 함수만 호출, 이전 함수는 무시
• 주로 input 박스 검색에서 사용

 

쓰로틀링

• 함수 호출 이후 일정한 간격으로 발생하는 함수는 무시
• 스크롤, 마우스 이벤트 등에서 사용

 

자바스크립트 - 함수 호출 지연 시키는 debounce 구현하기