[자바스크립트] 디바운싱과 쓰로틀링

자바스크립트에서 디바운싱과 쓰로틀링은 이벤트 핸들링과 관련된 기술입니다. 이 두 기술은 이벤트를 제어하여 불필요한 호출을 줄이고 성능을 향상시키는 데 도움을 줍니다.

1. 디바운싱

디바운싱은 이벤트 핸들러가 여러 번 호출되는 것을 방지하는 기술입니다. 예를 들어, 사용자가 검색 창에 글자를 입력하는 경우, 검색 결과가 동적으로 업데이트되는 이벤트 핸들러가 실행됩니다. 그러나 사용자가 글자를 연속해서 타이핑하는 경우, 검색 결과가 불필요하게 많이 업데이트되어 성능 문제를 일으킬 수 있습니다.

디바운싱은 일정 시간 동안 이벤트를 무시하고 마지막 이벤트만을 처리합니다. 예를 들어, 사용자가 검색 창에 글자를 입력할 때, 디바운싱을 적용하여 일정 시간(예: 500ms) 동안 대기한 후 마지막 입력에 대한 검색 결과만을 보여줍니다.

다음은 디바운싱을 구현하는 코드의 예시입니다.

 

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

위의 코드에서는 debounce 함수를 정의하여 이벤트 핸들러 함수와 딜레이 시간을 전달하면 디바운싱이 적용된 새로운 함수를 반환합니다. 이 새로운 함수는 일정 시간 후에 이벤트 핸들러 함수를 실행합니다.

2. 쓰로틀링

쓰로틀링은 이벤트 핸들러가 과도하게 호출되는 것을 방지하는 기술입니다. 예를 들어, 스크롤 이벤트 핸들러는 사용자가 스크롤을 할 때마다 실행됩니다. 그러나 스크롤링은 매우 빠르게 일어날 수 있으므로 이벤트 핸들러가 많이 호출되어 성능 문제를 일으킬 수 있습니다.

쓰로틀링은 일정 시간 동안 이벤트를 무시하고 한 번만 처리합니다. 예를 들어, 스크롤 이벤트 핸들러를 쓰로틀링하여 일정 시간(예: 200ms) 동안 스크롤 이벤트가 일어나지 않도록 하여 이벤트 핸들러를 실행합니다. 그리고 일정 시간이 지난 후에 다시 스크롤 이벤트가 발생하면 이벤트 핸들러가 다시 실행됩니다.

다음은 쓰로틀링을 구현하는 코드의 예시입니다.

 

function throttle(func, delay) {
  let timerId;
  return function() {
    const context = this;
    const args = arguments;
    if (!timerId) {
      timerId = setTimeout(() => {
        func.apply(context, args);
        timerId = null;
      }, delay);
    }
  }
}

위의 코드에서는 throttle 함수를 정의하여 이벤트 핸들러 함수와 딜레이 시간을 전달하면 쓰로틀링이 적용된 새로운 함수를 반환합니다. 이 새로운 함수는 일정 시간이 지나기 전에는 이벤트 핸들러 함수를 실행하지 않습니다.

3. 디바운싱과 쓰로틀링의 차이점

디바운싱과 쓰로틀링은 이벤트를 제어하는 방법이 다릅니다. 디바운싱은 이벤트를 일정 시간 동안 무시하고 마지막 이벤트만을 처리합니다. 쓰로틀링은 이벤트를 일정 시간마다 한 번씩만 처리합니다.

두 기술의 선택은 이벤트의 종류와 목적에 따라 다릅니다. 예를 들어, 검색 창에 글자를 입력할 때는 디바운싱을 적용하여 사용자가 입력하는 동안 검색 결과를 업데이트하지 않습니다. 반면에 스크롤 이벤트 핸들러는 쓰로틀링을 적용하여 스크롤링할 때마다 이벤트 핸들러가 실행되지 않도록 합니다.

종합적으로, 디바운싱과 쓰로틀링은 이벤트 핸들링에서 성능 개선을 위해 사용되는 중요한 기술입니다. 디바운싱은 이벤트를 일정 시간 동안 무시하고 마지막 이벤트만을 처리하고, 쓰로틀링은 이벤트를 일정 시간마다 한 번씩만 처리합니다. 따라서 이벤트의 종류와 목적에 따라 디바운싱과 쓰로틀링 중에서 적절한 기술을 선택하여 사용해야 합니다.