Debounce vs Throttle 차이점 (작성중)

debounce와 throttle은 둘 다 자바스크립트에서 이벤트 처리를 최적화하기 위해 사용되는 기술이다.

이 두 가지는 이벤트 호출을 제어하는 방식에 차이가 있기 때문에, 각각의 상황에 맞게 적절하게 사용해야 한다.

 

두 차이점을 설명하기에 앞서 이벤트에 대해 짧게 짚고 넘어가자.

이벤트란 브라우저에서 발생할 수 있는 일련의 action 이다. 예를 들면, 브라우저의 창을 줄이면 "resize" 이벤트가, 버튼을 클릭하면 모달 창이 뜨는 것은 "click"이벤트가 발생하는 것이다.

 

아마도 우리의 최대 관심사는 이벤트 핸들러 함수(event handler function)에 구현된 로직이 브라우저에서 어떻게 작동되느냐 일 것이다. 이 handler function은 창 사이즈를 조절하여 UI 요소를 수정하거나, 모달을 보여주거나, 임의의 이벤트에 대한 응답으로 특정 로직을 수행한다.

 

자바스크립트에서는 이벤트 리스너(event listener)를 사용함으로써 이벤트에 대응한다. 이벤트 리스너(event listener)는 DOM 요소에서 특정 이벤트를 수신받아서, 그 이벤트가 발생했을 때 이벤트 핸들러 함수를 실행하는 역할을 담당한다.

element.addEventListener(eventName, listener, options)

기본적으로 이벤트 리스너는 이벤트가 호출되면 실행된다.  (1:1)

이 말인 즉슨, 버튼을 한 번 클릭할 때 마다 하나의 핸들러 함수가 호출된다는 의미이다.

 

 

debounce는 이벤트를 여러 번 호출할 때 마지막 호출 이후 일정 시간이 지나기 전에는 해당 이벤트를 실행하지 않는 방식이고, throttle은 이벤트 호출을 일정한 간격으로 제한하는 방식이다. 

 

# debounce 예시:

사용자가 검색 창에 글자를 입력할 때, 검색 결과를 가져오는 이벤트를 debounce로 처리할 수 있다. 사용자가 연속해서 입력하더라도, 일정 시간 간격으로만 이벤트가 호출되도록 설정할 수 있다. 이렇게 함으로써, 검색 결과를 최적화하고 성능을 개선할 수 있다.

 

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

function handleSearch() {
  // 검색 결과를 가져오는 코드
}

const debouncedHandleSearch = debounce(handleSearch, 500);

// 검색 창에서 입력이 발생할 때마다 debouncedHandleSearch 함수가 호출됩니다.
searchInput.addEventListener('input', debouncedHandleSearch);

 

 

# throttle 예시:

사용자가 웹 페이지를 스크롤할 때, 스크롤 이벤트가 발생한다. 이때 스크롤 이벤트가 자주 호출되면, 성능에 부정적인 영향을 미칠 수 있다. 이런 경우 throttle을 적용하여 일정한 시간 간격으로만 이벤트가 호출되도록 설정할 수 있다. 이렇게 함으로써, 스크롤 이벤트 호출을 제한하고 성능을 개선할 수 있다.

 

function throttle(func, delay) {
  let timeoutId;
  let shouldRun = true;
  return function(...args) {
    if (!shouldRun) {
      return;
    }
    shouldRun = false;
    timeoutId = setTimeout(() => {
      func.apply(this, args);
      shouldRun = true;
    }, delay);
  };
}

function handleScroll() {
  // 스크롤 이벤트를 처리하는 코드
}

const throttledHandleScroll = throttle(handleScroll, 100);

// 윈도우가 스크롤될 때마다 throttledHandleScroll 함수가 호출됩니다.
window.addEventListener('scroll', throttledHandleScroll);

 

 

 

 

 

 

 

 

 

출처 : https://redd.one/blog/debounce-vs-throttle

and.. gpt 선생님..