Throttling & Debouncing(메모리 누수 관리)

Throttling과 Debouncing은 JavaScript 및 웹 개발에서 이벤트 핸들링과 비동기 작업 관리에 사용되는 중요한 개념입니다. 이 두 기술은 메모리 누수 및 성능 개선을 위해 사용됩니다.

 

1. Throttling (쓰로틀링):

• Throttling은 이벤트 핸들러가 일정한 간격으로만 호출되도록 하는 기술입니다.
• 예를 들어, 스크롤 이벤트나 리사이즈 이벤트와 같이 빈번하게 발생하는 이벤트에 대한 핸들러에서 Throttling을 사용하면 이벤트 핸들러가 과도하게 호출되지 않고, 일정한 간격으로 제한됩니다.
• 이로써 성능을 개선하고 메모리 누수를 방지할 수 있습니다.

 

2.Debouncing (디바운싱):

• Debouncing은 연속적으로 발생하는 이벤트 중 마지막 이벤트를 기준으로 일정 시간이 지난 후에만 이벤트 핸들러가 호출되도록 하는 기술입니다.
• 예를 들어, 검색어 입력창에서 사용자가 타이핑하는 동안 매번 검색을 실행하지 않고, 사용자가 일정 시간 동안 입력을 멈추면 검색을 실행하는 경우에 Debouncing을 사용할 수 있습니다.
• 이로써 불필요한 연산을 줄이고 효율적으로 리소스를 관리할 수 있습니다.

 

 

메모리 누수 관리와 관련하여, Throttling과 Debouncing을 사용할 때 주의해야 합니다. 이벤트 핸들러를 너무 느리게 실행하거나, Throttling 및 Debouncing의 시간 간격을 너무 길게 설정하면 사용자 경험이 저하될 수 있습니다. 따라서 적절한 간격을 설정하는 것이 중요합니다.

 

 

아래는 JavaScript를 사용한 Throttling 및 Debouncing의 간단한 예제입니다:

Throttling 예제:

function throttle(func, delay) {
  let throttling = false;
  
  return function() {
    if (!throttling) {
      func.apply(this, arguments);
      throttling = true;
      setTimeout(() => {
        throttling = false;
      }, delay);
    }
  };
}

const throttledFn = throttle(() => {
  // 이벤트 핸들러 로직
}, 1000); // 1초에 한 번만 호출

window.addEventListener('scroll', throttledFn);

 

Debouncing 예제:

function debounce(func, delay) {
  let timer;
  
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

const debouncedFn = debounce(() => {
  // 이벤트 핸들러 로직
}, 500); // 0.5초 후에 호출

document.addEventListener('input', debouncedFn);