throttle, debounce 유틸리티 함수

⭐️ throttle 유틸리티 함수

export const throttle = (callback, delay = 300) => {
  let isThrottling = false;

  return (...args) => {
    if (!isThrottling) {
      callback.apply(this, args);
      isThrottling = true;
      setTimeout(() => (isThrottling = false), delay);
    }
  };
};

//! Test
// window.addEventListener(
//   "mousemove",
//   throttle(() => {
//     console.log("throttling");
//   }, 300)
// );

위의 함수는 지정된 시간 간격(delay) 동안 여러 번 호출되었을 때, 일정한 주기로(callback 호출 후 delay 이후) 호출되도록 하는 재사용 가능한 함수입니다. 예를 들어, 스크롤 이벤트나 리사이징 이벤트 등 빈번하게 발생하는 이벤트에 대해 처리를 제한할 때 유용합니다. 이 함수는 처음 호출될 때는 바로 실행되지만, 그 다음 호출부터는 delay 시간 내에 추가 호출이 들어오면 무시하고, delay 이후에 마지막으로 호출된 이후부터 delay 시간이 지난 후에 다시 호출됩니다.

 

throttle은 이벤트 핸들러를 일정한 주기마다 최대 한번씩만 호출되도록 하는 것입니다. 예를 들어, 스크롤 이벤트 핸들러가 있을 때, 스크롤 이벤트가 발생할 때마다 핸들러가 호출되면 성능 문제가 발생할 수 있습니다. throttle은 이런 문제를 해결하기 위해 스크롤 이벤트가 발생하더라도 일정한 주기마다 한번씩만 핸들러를 호출합니다.  

 

⭐️ debounce 유틸리티 함수

export const debounce = (callback, delay = 300) => {
  let clearDelayId;
  return (...args) => {
    clearTimeout(clearDelayId);
    clearDelayId = setTimeout(callback.bind(this, ...args), delay);
  };
};

//! Test
// window.addEventListener(
//   "mousemove",
//   debounce(() => {
//     console.log("debounce");
//   }, 300)
// );

위의 함수는 디바운스(debounce) 함수를 구현한 것으로, 입력 이벤트가 끝나고 일정 시간이 지난 후에 콜백 함수가 실행되도록 하는 기능을 제공합니다. 이를 통해, 빈번한 이벤트 발생으로 인한 성능 저하나 불필요한 콜백 함수 호출을 방지할 수 있습니다. 

이 함수는 콜백 함수와 딜레이(delay) 값(기본값 300ms)을 인자로 받으며, 반환된 함수는 이벤트 핸들러로 사용할 수 있습니다. 해당 함수가 실행될 때마다 이전에 등록된 타이머를 취소하고, 새로운 타이머를 등록합니다. 딜레이 시간이 경과하면 콜백 함수를 실행합니다.

 

 

debounce는 이벤트 핸들러가 호출되는 주기를 지연시켜 연속된 이벤트 호출을 하나로 그룹화하는 것입니다. 예를 들어, 검색어 입력 이벤트 핸들러가 있을 때, 사용자가 타이핑하는 도중에 핸들러가 매번 호출되면 검색어가 변경될 때마다 서버에 요청을 보내게 됩니다. 이렇게 너무 많은 요청이 발생하면 서버에 부하가 걸릴 수 있습니다. debounce는 이런 문제를 해결하기 위해 일정한 시간 동안 이벤트가 발생하지 않으면 핸들러를 호출합니다.

 

 

✅ 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Function.prototype.apply() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Function.prototype.bind() - JavaScript | MDN