쓰로틀링과 디바운싱

c_yj·2023년 6월 29일

쓰로틀링과 디바운싱에 대해 개념을 정리해보자

쓰로틀링 ✍

쓰로틀링은 사용자가 이벤트를 몇 번이나 발생 시키든 일정한 시간 간격으로 한번만 실행하도록 하는 기법이다.

쓰로틀링은 어디에 사용할까?

스크롤 이벤트: 스크롤을 올리거나 내릴 때, scroll 이벤트가 매우 빈번하게 발생할 때 매우 효과적이다 쓰로틀링을 적용하여 일정한 간격으로 스크롤 이벤트 핸들러를 호출하면, 성능을 개선하고 렉을 줄일 수 있다.
버튼 클릭: 사용자가 하나의 버튼을 여러 번 연속해서 클릭하는 경우가 있는데. 이때 버튼 클릭 이벤트 핸들러를 쓰로틀링하여, 일정 시간 동안 여러 번의 클릭 이벤트를 제어할 수 있다. 쓰로틀링을 사용하면 연속 클릭하는 것을 제한하고, 중복 실행을 방지하자
실시간 데이터 업데이트: 실시간 데이터 업데이트나 상태 업데이트 시에도 쓰로틀링을 적용할 수 있다. 데이터의 변경이 빈번하게 발생하는 경우, 쓰로틀링을 통해 데이터 변경 이벤트를 일정한 간격으로 제어하면 성능을 향상시킬 수 있다.

JS코드

const clickBtn = document.querySelector('#clickBtn');
const clickCnt = document.querySelector('#clickCnt');
const throttlingCnt = document.querySelector('#throttlingCnt');

let timerId = null; 

function throttling(func, timeout = 300) {
  if (timerId) {
    return;
  }

  timerId = setTimeout(() => {
    func();
    timerId = null; 
  }, timeout);
}

function delayFunction() {
  throttlingCnt.innerHTML = parseInt(throttlingCnt.innerHTML) + 1;
}

clickBtn.addEventListener('click', () => {
  clickCnt.innerHTML = parseInt(clickCnt.innerHTML) + 1;
  throttling(delayFunction);
});

디바운싱

디바운싱은 연속적으로 발생하는 이벤트에서 일정 시간이 지난 후에 함수를 실행하는 기법이다.

디바운싱은 어디에 사용할까?

검색 입력 필드: 사용자가 검색 입력 필드에 연속적으로 입력을 하면 매번 검색 요청을 보내는 것은 비효율적이다. 디바운싱을 적용하여 일정 시간 동안 입력이 없을 때에만 검색 요청을 보내면, 네트워크 부하를 줄이고 효율적인 검색을 수행할 수 있다.
유료 API 사용: 유료 API를 사용하는 경우, 요청 횟수를 제한하거나 요금을 지불해야 할 수 있다. 디바운싱을 적용하여 사용자의 연속적인 요청을 제어하면, API 사용량을 관리하고 비용을 절감할 수 있다.
버튼 클릭 이벤트: 버튼 클릭 이벤트를 처리할 때 디바운싱을 적용하면, 사용자가 연속해서 버튼을 클릭하는 것을 제어할 수 있다. 예를 들어, 연속해서 버튼을 클릭하는 동작을 방지하여 중복 실행이나 오작동을 방지할 수 있다.

JS코드

const clickBtn = document.querySelector('#clickBtn');
const clickCnt = document.querySelector('#clickCnt');
const debouncingCnt = document.querySelector('#debouncingCnt');

let timerId;

function debouncing(func, timeout = 300) {
  clearTimeout(timerId);
  timerId = setTimeout(func, timeout);
}

function delayFunction() {
  debouncingCnt.innerHTML = parseInt(debouncingCnt.innerHTML) + 1;
}

function handleClick() {
  clickCnt.innerHTML = parseInt(clickCnt.innerHTML) + 1;
  debouncing(delayFunction);
}

clickBtn.addEventListener('click', handleClick);