[자바스크립트] Debounce와 Throttle의 차이점

자바스크립트에서 자주 사용되는 Debounce와 Throttle은 이벤트 처리 방식을 조절하여 성능을 향상시키고 사용자 경험을 개선하는 데 사용되는 기법입니다. 둘 다 연속적으로 발생하는 이벤트를 제한하지만, 작동 방식에 차이가 있습니다.

Debounce (디바운스)

• 정의: 일정 시간 동안 이벤트가 발생하지 않으면 한 번만 함수를 실행합니다. 즉, 연속적인 이벤트를 무시하고 마지막 이벤트만 처리합니다.
• 예시:
  • 검색창에 입력할 때마다 검색 요청을 보내는 대신, 사용자가 입력을 멈춘 후 일정 시간이 지나서 한 번만 검색 요청을 보냅니다.
  • 창 크기를 조정할 때마다 레이아웃을 다시 계산하는 대신, 사용자가 창 크기를 조정을 멈춘 후에 한 번만 레이아웃을 다시 계산합니다.
• 장점:
  • 불필요한 이벤트 처리를 줄여 성능을 향상시킵니다.
  • 사용자 경험을 저해하는 과도한 요청을 방지합니다.
• 단점:
  • 이벤트 발생 직후에는 함수가 실행되지 않을 수 있습니다.

Throttle (쓰로틀)

• 정의: 일정 시간 간격으로만 함수를 실행합니다. 즉, 연속적인 이벤트가 발생하더라도 일정 시간마다 한 번씩만 함수를 실행합니다.
• 예시:
  • 스크롤 이벤트가 발생할 때마다 데이터를 로딩하는 대신, 일정 시간 간격으로만 데이터를 로딩하여 사용자에게 부드러운 스크롤 경험을 제공합니다.
  • 게임에서 캐릭터가 이동할 때마다 서버에 위치 정보를 보내는 대신, 일정 시간 간격으로만 서버에 위치 정보를 보냅니다.
• 장점:
  • 일정한 간격으로 함수를 실행하여 예측 가능한 성능을 제공합니다.
  • 연속적인 이벤트에 대해서도 일정 수준의 처리를 보장합니다.
• 단점:
  • Debounce에 비해 함수가 더 자주 실행될 수 있습니다.

Debounce와 Throttle의 차이점 요약

실행 시점	이벤트 발생 후 일정 시간 동안 더 이상 이벤트가 발생하지 않으면 실행	일정 시간 간격으로 실행
사용 시기	연속적인 이벤트가 발생할 때 마지막 이벤트만 처리해야 할 때	일정 시간 간격으로 이벤트를 처리해야 할 때
예시	검색, 창 크기 조절	스크롤, 게임 캐릭터 이동

어떤 것을 사용해야 할까요?

• Debounce: 사용자가 입력을 완료하고 나서 처리해야 할 때, 불필요한 요청을 줄이고 싶을 때 사용합니다.
• Throttle: 일정한 간격으로 이벤트를 처리해야 할 때, 사용자 경험을 부드럽게 만들고 싶을 때 사용합니다.

Debounce (디바운스) 코드 예시

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

• func: 실행할 함수를 전달받습니다.
• wait: 일정 시간(밀리초)을 설정합니다.
• timeout: 이전 타임아웃을 저장하기 위한 변수입니다.
• 함수가 호출될 때마다 기존 타임아웃을 취소하고 새로운 타임아웃을 설정합니다.
• wait 시간이 지나면 func 함수가 실행됩니다.

Throttle (쓰로틀)

function throttle(func, limit) {
  let last = 0;
  return function() {
    let now = Date.now();
    if (now - last > limit) {
      last = now;
      func.apply(this, arguments);
    }
  };
}

• func: 실행할 함수를 전달받습니다.
• limit: 최소 실행 간격(밀리초)을 설정합니다.
• last: 마지막 실행 시간을 저장하기 위한 변수입니다.
• 함수가 호출될 때마다 현재 시간과 마지막 실행 시간의 차이를 계산합니다.
• limit 시간이 지났으면 func 함수를 실행하고 마지막 실행 시간을 업데이트합니다.

const input = document.getElementById('searchInput');

// 검색 입력 시 debounce 적용
input.addEventListener('input', debounce(() => {
  console.log('검색 요청:', input.value);
  // 실제 검색 로직 실행
}, 500)); // 500ms 동안 입력이 없으면 검색 요청

// 스크롤 시 throttle 적용
window.addEventListener('scroll', throttle(() => {
  console.log('스크롤 이벤트 발생');
  // 데이터 로딩 등의 작업 실행
}, 100)); // 100ms마다 한 번씩만 실행

Lodash의 debounce, throttle 함수

Lodash 라이브러리는 debounce와 throttle 함수를 제공하여 더욱 편리하게 사용할 수 있습니다.

const _ = require('lodash');

// Debounce
const debouncedFunc = _.debounce(() => {
  console.log('Debounced function called');
}, 1000);

// Throttle
const throttledFunc = _.throttle(() => {
  console.log('Throttled function called');
}, 100));

추가 설명

• debounce는 마지막 이벤트에 집중하여 불필요한 요청을 줄이는 데 효과적입니다.
• throttle은 일정 시간 간격으로 함수를 실행하여 부드러운 애니메이션이나 스크롤 이벤트 처리에 적합합니다.
• Lodash와 같은 라이브러리를 사용하면 코드를 간결하게 작성할 수 있습니다.

주의:

• Debounce는 사용자가 입력을 완료하고 나서 처리해야 할 때 사용하는 것이 좋습니다.
• Throttle은 일정한 간격으로 이벤트를 처리해야 할 때 사용하는 것이 좋습니다.
• debounce와 throttle을 잘못 사용하면 의도치 않은 결과를 초래할 수 있으므로, 각 상황에 맞게 적절히 사용해야 합니다.