[JavaScript] 성능 최적화를 해보자 ! Debouncing과 Throttling

JavaScript

[JavaScript] 성능 최적화를 해보자 ! Debouncing과 Throttling

Dana10 2025. 1. 14. 23:44

1. Debouncing (디바운싱)

마지막 이벤트가 실행되고 나서 일정한 시간이 지나도 더이상 이벤트가 발생하지 않을 때 마지막으로 실행된 함수만을 실행함.
즉 연속적으로 발생한 이벤트를 하나로 처리.
자동 완성 기능이나 키워드 검색 시 api 호출 횟수를 최소한으로 할 때 주로 사용.

<body>
  <input type="text" />
  <div>
    <span>default : </span>
    <span id="default"></span>
  </div>
  <div>
    <span>debounce : </span>
    <span id="debounce"></span>
  </div>
</body>

document.querySelector('input').addEventListener('input',(e) => {
  const { value } = e.target;
  document.getElementById('default').innerText = value;
  debounce(value);
})


const debounceFunc = (cb,delay) => {
  let timeout;
  return (...arg) => {
   clearTimeout(timeout);
   timeout = setTimeout(() => cb(...arg),delay)
  }
}

const debounce = debounceFunc((value) => {
  document.getElementById('debounce').innerText = value;
},1000);

위의 예시를 보면 input에 타이핑을 할 때마다 이벤트가 발생하게 된다.

default 태그의 innerText는 실시간 타이핑을 그대로 랜더링 한다.

반면 debounce innerText는 1초가 지난 후에야 타이핑 내용을 랜더링 한다.

이렇게 이벤트가 연속으로 발생할 때 일정 시간(1초)이 지나고 나서 추가적인 이벤트가 없다면

한 번에 이벤트를 실행하는 것을 디바운스라고 한다.

input에 타이핑을 할 때마다 debounce(value)가 호출되는데, 이는 즉 debounceFunc를 호출하는 것이다.

debouncFunc는 일정 시간이 지난 후에 콜백 함수를 반환하는데

만약 일정 시간이 지나기 전에 또다시 함수를 호출한다면

기존에 timeout에 할당되었던 setTimeout 함수가 clearTimeout에 의해 사라져버린다.

그리고 또 새로운 타이머가 맞춰진다.

여기서 debounceFunc가 호출될 때, timeout이 초기화되지 않나?

그럼 clear할 것도 없지 않나?

아니 그러면 1000초마다 모든 호출을 다 실행하겠네?!! 그건 debounce가 아닌데.. ?

이런 늪에 빠져버렸다.

코드를 천천히 분석하며 구글링을 통해 결론을 얻었다.

setTimeout이 비동기 함수이기 때문에 클로저로 인해 기존의 setTimeout은 timeout을 계속 참조하고 있고

새로 debounceFunc가 호출될 때 timeout이 초기화되는 것이 아닌 기존의 setTimeout 함수를 담고 있는 상태인 것이다.

따라서 clearTimeout으로 기존의 setTimeout 함수가 사라지고,

새로 setTimeout이 timeout에 할당된다.

이러한 과정으로 debounce가 실행된다.

2. Throttling (쓰로틀링)

일정 주기마다 이벤트를 발생시킴
즉 일정 시간 동안 딱 한 번만 이벤트를 발생시킴
일정 주기가 지나지 않았는데 호출된 함수는 무시함
주로 스크롤의 위치를 활용해서 무언가 개발을 할 때 많이 사용

<body>
  <input type="text" />
  <div>
    <span>default : </span>
    <span id="default"></span>
  </div>
  <div>
    <span>throttle : </span>
    <span id="throttle"></span>
  </div>
</body>

document.querySelector('input').addEventListener('input',(e) => {
  const { value } = e.target;
  document.getElementById('default').innerText = value;
  throttle(value);
})

 let isThrottling;  
const throttleFunc = (cb,delay) => {
  return (...arg) => { 
    if(isThrottling) return;
  	isThrottling = true;
    setTimeout(() => {
      cb(...arg);
      isThrottling = false;
    },delay)
  }
}

const throttle = throttleFunc((value) => {
  document.getElementById('throttle').innerText = value;
},1000);

1. input에 타이핑을 할 때마다 throttle(value);가 호출된다.

2. throttle에는 trottleFunc의 반환 함수가 할당되어 있다.

3. 최초의 isThrottling은 undefined이기 때문에 return되지 않고 그대로 실행된다.

4.isThrottling이 true로 재할당된다.

5.setTimeout함수가 실행된다.

6.여기서는 1초의 delay를 주었는데, 만약 1초 안에 또다시 이벤트가 발생한다면

7.throttle(value)가 다시 실행된다.

8.이때 비동기 함수인 setTimeout이 isThrottling의 값을 클로저에 의해 아직 참조하고 있다.

9.따라서 코드 첫번째 if문에서 isThrottling은 아까 true로 재할당되었기 때문에 현재 true라서 코드가 더이상 실행되지 않고 return된다.

10.만약 1초가 지나면, setTimeout의 콜백함수가 실행되고, 인자로 받은 콜백 함수에 매개변수(value)를 전달하게 된다.

11.그리고나서 isThrottling에 false를 재할당한다.

12.전역 변수 let isThrottling이 false로 값이 바뀌고,

13.다시 이벤트가 실행된다면 위와 같은 과정(4번 이후)을 반복하게 된다.

'JavaScript' 카테고리의 다른 글

[JavaScript] 고차 함수의 늪에 빠진 날 (0)	2025.01.16
[JavaScript] 배열을 일일이 순회하지 않고 더 빨리 값을 찾고 싶니? new Set() 써볼래? (0)	2025.01.15
[JavaScript] 이벤트 위임이 뭐죠?? ( feat . closest, classList ) (0)	2025.01.13
[JS] 바닐라JS / 내가 선택한 key값을 어떻게 넘겨받냐.. dataset은 어떤데 (0)	2025.01.09
객체의 깊은 복사 vs 얕은 복사 (1)	2025.01.06

현재글[JavaScript] 성능 최적화를 해보자 ! Debouncing과 Throttling

🌱 Frontend Developer

✏️ 내가 보려고 기록하는 개발일지

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

🌱 Frontend Developer