자바스크립트 Throttle(스로틀)과 Debounce(디바운스)의 개념과 차이점!

오늘은 자바스크립트에서 이벤트 핸들링을 최적화하기 위해 많이 사용하는 개념인

Debounce와 Throttle에 대해 알아볼 것이다.

 

최적화 필요성

자바스크립트에서 이벤트 핸들링을 최적화하는 이유는 성능과 사용자 경험을 개선하기 위해 필요하다.

특히, 사용자가 반복해서 발생시키는 이벤트(예: 스크롤, 리사이즈, 입력 등)는 자칫 성능 저하를 유발할 수 있기 때문에.. 

 

Throttle

• 목적: 특정 함수가 호출되는 빈도를 제한하여 자원 소모를 줄이기 위해 사용된다.
• 동작 원리: 함수를 일정 시간 간격(예: 1000ms, 1초)으로만 실행되도록 제한한다. 이 간격 동안에는 함수를 한 번만 실행하고, 그 후에 다시 호출할 수 있다.

throttle은 이벤트 핸들링, API 호출 등의 상황에서 쓰일 수 있다.

throttle을 사용하는 방법은 2가지가 있는데 첫 번째는 직접 함수를 작성하는 방법과 "Lodash"라는 라이브러리를 사용하는 방법이 있다.

 

codepen으로 확인하고 다른 예제로도 살펴보자.

 

 

직접 throttle 함수 작성하는 방법

function throttle(func, delay) {
  let lastTime = 0; // 마지막 함수 호출 시간을 저장

  return function (...args) {
    const now = new Date().getTime(); // 현재 시간

    if (now - lastTime >= delay) { // 설정한 시간 간격이 지난 후에만 함수 실행
      func.apply(this, args); // 주어진 함수 실행
      lastTime = now; // 마지막 호출 시간을 갱신
    }
  };
}

// 사용 예제
const log = () => console.log("버튼 클릭!");

const throttledLog = throttle(log, 1000); // 1초에 한 번만 호출되도록 제한

document.getElementById("myButton").addEventListener("click", throttledLog);

 

 Lodash 라이브러리를 사용한 방법

<!-- Lodash CDN 링크 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<script>
  // 사용 예제
  const log = () => console.log("버튼 클릭!");

  const throttledLog = _.throttle(log, 1000); // 1초에 한 번만 호출되도록 제한

  document.getElementById("myButton").addEventListener("click", throttledLog);
</script>

 

 

두 가지 각각 장단점이 있는데,

 

직접 구현할 경우 라이브러리 의존성을 줄이고, 커스터마이징을 원할 때 유용하고

Lodash는 이미 최적화된 throttle 기능을 제공하므로, 시간과 성능, 코드를 절약하고 싶을 때 사용하기 좋다.

 

Debounce

• 목적: 빈번하게 발생하는 이벤트에 대해 불필요한 처리를 방지하고, 성능을 최적화하는 것
• 동작 원리: 이벤트가 발생할 때마다 타이머를 설정하고, 일정 시간이 지나기 전에 또 다른 이벤트가 발생하면 기존 타이머를 취소하는 방식

Debounce는 실시간 검색, 창 크기 조정, 스크롤 이벤트, 입력 유효성 검사, 검색 필터링 등의 상황에서 쓰일 수 있다.

Debounce을 사용하는 방법은 2가지가 있는데 첫 번째는 직접 함수를 작성하는 방법과 "Lodash"라는 라이브러리를 사용하는 방법이 있다.

 

직접 Debounce 함수 작성하는 방법

// debounce 함수 직접 구현
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer); // 이전 타이머 취소
    timer = setTimeout(() => func.apply(this, args), delay); // 새로운 타이머 설정
  };
}

// 검색 처리 함수
function search(query) {
  const results = document.getElementById('searchResults');
  results.innerHTML = query ? `<li>검색 결과: ${query}</li>` : '';
}

// debounce 적용 (1초 지연)
const debouncedSearch = debounce(search, 1000);

// 검색창 이벤트 처리
document.getElementById('searchInput').addEventListener('input', (e) => {
  debouncedSearch(e.target.value); // 1초 후에만 실행
});

직접 Debounce 함수 작성하는 방법

// 검색 처리 함수
function search(query) {
  const results = document.getElementById('searchResults');
  results.innerHTML = query ? `<li>검색 결과: ${query}</li>` : '';
}

// Lodash debounce 적용 (1초 지연)
const debouncedSearch = _.debounce(search, 1000);

// 검색창 이벤트 처리
document.getElementById('searchInput').addEventListener('input', (e) => {
  debouncedSearch(e.target.value); // 1초 후에만 실행
});

 

Throttle과 Debounce의 차이?

• Throttle: 일정 시간 간격으로 이벤트를 실행 (주기적).
• Debounce: 마지막 이벤트가 발생한 후 일정 시간 대기 후 실행 (마지막만 실행).

Throttle과 Debounce 둘 중 상황에 맞게 사용하면 될 것 같다!