디바운스와 쓰로틀링: 차이와 활용법

디바운스(Debounce)와 쓰로틀링(Throttling)은 JavaScript에서 이벤트 발생 빈도를 제어하기 위한 기술입니다. 많은 이벤트가 동시에 발생하는 것을 방지하여 성능을 최적화할 수 있습니다. 🛠️

---

디바운스(Debounce)

디바운스는 이벤트가 연속적으로 발생할 때, 특정 시간 동안 추가적인 이벤트가 발생하지 않으면 한 번만 실행되도록 합니다. 📌

주요 특징:

• 이벤트 호출을 지연시키며, 마지막 이벤트 발생 후 지정된 시간이 지나야 실행됩니다.
• 사용 사례: 검색 입력창, 창 크기 조정 이벤트 등.

예시: 검색 입력창

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

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

searchInput.addEventListener('input', debounce(() => {
  console.log('검색 요청!'); // API 호출 등
}, 500));

동작:

1. 사용자가 키를 입력할 때마다 타이머를 초기화합니다.
2. 입력이 멈춘 후 500ms가 지나면 콜백 함수가 실행됩니다.

💡 이점: 네트워크 요청이나 DOM 업데이트가 불필요하게 반복되지 않습니다.

---

쓰로틀링(Throttling)

쓰로틀링은 이벤트가 지속적으로 발생하더라도, 지정된 시간 간격에 따라 최대 한 번만 실행되도록 제한합니다. 🚦

주요 특징:

• 이벤트를 제한된 간격으로 실행합니다.
• 사용 사례: 스크롤 이벤트, 마우스 이동 이벤트 등.

예시: 스크롤 이벤트

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

const onScroll = () => {
  console.log('스크롤 이벤트 실행!');
};

window.addEventListener('scroll', throttle(onScroll, 1000));

동작:

1. 사용자가 스크롤할 때 첫 이벤트를 즉시 실행합니다.
2. 이후에는 1초 간격으로만 이벤트가 실행됩니다.

💡 이점: 이벤트 과다 호출로 인해 성능이 저하되는 것을 방지합니다.

---

디바운스와 쓰로틀링의 차이

특성	디바운스	쓰로틀링
실행 조건	이벤트가 멈춘 후 일정 시간 지남	일정 시간 간격으로 실행
주된 목적	이벤트 호출 횟수 감소	일정 간격으로 이벤트 호출
사용 사례	입력창 자동완성, 창 크기 조정	스크롤 이벤트, 클릭 이벤트

---

정리 ✨

언제 디바운스를 사용할까요?

• 사용자가 입력을 멈춘 후에만 작업을 실행하고 싶을 때.

언제 쓰로틀링을 사용할까요?

• 이벤트를 일정 간격으로 제한해야 할 때.

이 두 가지 기술을 적절히 활용하면 애플리케이션 성능을 개선하고 사용자 경험을 향상시킬 수 있습니다. 🚀

더 궁금한 점이 있거나, 예시가 더 필요하다면 댓글로 남겨주세요! 😊