개발하는데 다 이유가 있겠지

디바운스(Debounce)와 쓰로틀(Throttle)은 Javascript에서 특정 함수의 실행 빈도를 조절하는 기법으로 최적화 기법으로 사용해 본 경험이 있다.

 

디바운스(Debounce)

---

이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.

즉, 순차적 호출을 하나의 그룹으로 '그룹화'할 수 있다.

연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것이다.

출처 : https://webclub.tistory.com/607

검색창에 '개발하는데 다 이유가 있지'를 검색하려고 한다. enter 없이 input 이벤트로 API 검색 요청이 된다고 가정한다.
그러면 'ㄱ', '개', '갭', '바', '발',  ... 이런식으로 불필요한 API 요청이 많이 발생하게 된다. 글자가 어느정도 입력이 됐을 때 요청이 가도록 일정 시간동안 입력이 없을 때 데이터를 그룹화하여 데이터를 전송해야 한다.

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

// 예시: 1초 동안 이벤트가 발생하지 않으면 검색 함수 실행
const debouncedSearch = debounce(search, 1000);

// 검색 입력 시마다 타이머가 리셋되고, 1초 동안 입력이 없으면 검색 함수 실행
inputElement.addEventListener('input', debouncedSearch);

 

쓰로틀(Throttle)

---

이벤트를 일정한 주기마다 발생하도록 하는 기술이다. Throttle 설정시간으로 1ms를 설정하면 해당 이벤트는 1ms 동안 최대 1번만 실행된다.

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것이다.

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

// 예시: 500ms마다 한 번만 로그 출력
const throttledLog = throttle(() => console.log('Throttled'), 500);

// 빠르게 클릭해도 500ms마다 한 번씩만 로그가 출력됩니다.
window.addEventListener('click', throttledLog);

 

차이점

---

디바운스(Debounce)

특징

• 마지막 이벤트 중심: 연속적인 이벤트 중 마지막 이벤트만 처리합니다.
• 일정 시간 대기: 지정된 시간 동안 이벤트가 발생하지 않으면 함수가 실행됩니다.
• 용도: 검색창 입력, 자동완성 등 사용자 입력이 완료된 후 처리해야 할 경우에 주로 사용됩니다.

예시 : 검색창에 글자를 입력할 때마다 API 요청을 보내는 대신, 사용자가 입력을 멈춘 후 일정 시간이 지나서 한 번만 검색 요청을 보냅니다.

 

쓰로틀(Throttle)

특징

• 일정 시간 간격: 지정된 시간 간격마다 함수를 실행합니다.
• 빈번한 이벤트 제한: 연속적인 이벤트가 발생하더라도 일정 시간 간격으로만 함수가 실행됩니다.
• 용도: 스크롤 이벤트, 리사이즈 이벤트 등 빈번하게 발생하는 이벤트를 제어하는 데 사용됩니다.

예시 : 사용자가 웹 페이지를 스크롤할 때마다 무거운 작업을 수행하는 함수를 호출하는 경우, 일정 시간 간격으로만 함수를 실행하여 성능 저하를 방지합니다.

특징	디바운스	쓰로틀
실행 시점	이벤트 발생 후 일정 시간 동안 이벤트가 없을 때	일정 시간 간격으로
주요 용도	사용자 입력 처리, 검색 기능	스크롤, 리사이즈 이벤트 처리
목적	불필요한 요청 감소, 사용자 경험 향상	성능 최적화, 부드러운 애니메이션

 

Reference
디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점