디바운싱과 쓰로틀링(Debouncing&Throttling)

목차

1. 디바운스란?
2. 디바운싱 사용 예시
3. 디바운싱 코드
4. 쓰로틀링이란?
5. 쓰로틀링 사용 예시
6. 쓰로틀링 코드
7. 디바운싱과 쓰로틀링의 차이
8. Leading edge vs Trailing edge
9. Leading edge 예시
10. Debounce Leading Edge vs Throttling
11. 정리

1. 디바운스란?

전자에서 기계적인 접점이 붙거나 떨어질 때 발생하는 바운싱 현상을 방지하기 위한 기법에서 유래. 프로그래밍에서는 연이어 발생하는 이벤트를 하나의 그룹으로 묶어서 처리, 주로 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용.

2. 디바운싱 사용 예시

1. 창 크기 조절 이벤트: 창 크기가 변할 때마다 이벤트가 발생하는 것을 방지하고, 크기 조절이 끝난 후에만 이벤트가 발생하도록 설정.
   • 디바운싱을 적용하지 않으면 창 크기가 변할 때마다 이벤트가 발생.
   • 디바운싱을 적용하면 크기 조절이 끝난 후 한 번만 이벤트 발생.
2. 키보드 입력을 통한 Ajax 요청: 타자 입력이 끝난 후에만 Ajax 요청을 보내도록 설정.
   • 디바운싱을 적용하지 않으면 입력할 때마다 요청을 보내 비효율적.
   • 디바운싱을 적용하면 입력이 끝난 후 한 번만 요청을 보냄.

3. 디바운싱 코드

const $input = document.querySelector("#input");
const $app= document.querySelector("#app");

const callAjaxRequest = (e) => {
	$app.insertAdjacentHTML("beforeend", `<p>ajax 요청 ${e.target.value}</p>`);
};

const debounce = (func) => {
  let timer; // 클로저를 이용하여 함수내부에 timer변수 선언
  return (e) => {
    if (timer) clearTimeout(timer); // 현재 돌아가고 있는 타이머 취소
    timer = setTimeout(func(e), 500); // 500ms의 타이머를 다시 실행시킴
  };
};

$input.addEventListener("input", debounce(callAjaxRequest));

• 첫 실행: 클로저를 이용하여 내부 변수 timer 선언. timer가 없기 때문에 setTimeout 설정.
• 그 이후 실행: timer가 할당되어 있으면 clearTimeout으로 취소하고 다시 setTimeout 설정.

4. 쓰로틀링이란?

출력을 조절한다는 의미. 이벤트를 일정 주기마다 발생하도록 하는 기술. 설정 시간 동안 최대 한 번만 이벤트가 발생하도록 조절.

5. 쓰로틀링 사용 예시

1. 스크롤 이벤트: 스크롤할 때마다 이벤트가 너무 많이 발생하지 않도록 조절.
   • 쓰로틀링을 적용하지 않으면 스크롤 이벤트가 많이 발생.
   • 쓰로틀링을 적용하면 일정 주기마다 이벤트가 발생.

6. 쓰로틀링 코드

const $app= document.querySelector("#app");
const $countNumber = document.querySelector("#count-number");
let count = 0;

const throtlle = (func) => {
  let timer; // 클로저를 이용하여 함수내부에 timer변수 선언

  return () => {
    if (!timer) {
			timer = setTimeout(() => {
				timer = null;
				func();
			}, 1000);
		}    
  };
};

const increaseCountNumber = () => {
	$countNumber.innnerText = count++;
};

$input.addEventListener("scroll", throttle(increaseCountNumber));

• 첫 실행: timer가 없기 때문에 setTimeout 실행.
• 그 이후 실행: timer가 있으면 아무 동작도 하지 않음. 설정 시간이 지나면 timer를 초기화하고 함수 실행.

7. 디바운싱과 쓰로틀링의 차이

• 디바운싱: 연이어 발생하는 이벤트를 그룹으로 묶어 마지막이나 처음에 실행된 함수만 처리.
  • Leading edge: 처음 실행된 함수만 처리.
  • Trailing edge: 마지막 실행된 함수만 처리.
• 쓰로틀링: 이벤트가 일정 주기마다 발생하도록 조절.

8. Leading edge vs Trailing edge

• Leading edge: 이벤트가 처음 발생할 때 함수 실행, 이후 일정 시간 동안 이벤트 무시.
  • throttling과 유사하다.
• Trailing edge: 이벤트가 마지막에 발생할 때 함수 실행.

9. Leading edge 예시

const debounce = (func, wait, leading = false) => {
  let timer;

  return (e) => {
    const callNow = leading && !timer;
		
		const later = () => {
			timer = null;
      if (!leading) func(e);
		}

    clearTimeout(timer);
    timer = setTimeout(later, wait);

    if (callNow) func(e);
  };
}

• 실행 상태:
  • 처음 실행 시 leading이 true , timer가 없으므로 callNow가 true가 되어 함수 실행.
  • 이후 이벤트가 들어오면 timer변수가 할당되었으므로 callNow가 false가 되어 함수가 실행되지 않음.
  • 500ms 안에 이벤트가 지속적으로 들어오면 모두 무시, 마지막 이벤트 이후 500ms 동안 추가 이벤트가 없으면 함수 실행.

10. Debouncing Leading Edge vs Throttling

• 공통점:
  • 첫 요청 이후 지속적인 요청을 무시.
• 차이점:
  • Debouncing Leading Edge: 설정한 타이머시간 안에 요청이 지속적으로 들어올 경우 모든 요청을 무시한다.
  • Throttling: 일정 시간 동안 지속적인 요청을 무시하나, 시간이 지나면 다시 요청을 허용.

11. 정리

• 디바운싱: Ajax 검색 등에서 주로 사용. 그룹에서 처음이나 마지막으로 실행된 함수를 처리.
  • Leading edge: 처음 실행된 함수만 처리.
  • Trailing edge: 마지막 실행된 함수만 처리.
• 쓰로틀링: 성능 개선을 위해 주로 사용. 무한 스크롤 등에서 사용. 이벤트를 일정 주기마다 발생.목차