이벤트가 많아... Debounce와 Throttle

input이나 scroll시 발생하는 이벤트를 보면 무수히 많은 이벤트가 발생하는 것을 볼 수 있다. 스크롤 이벤트를 예시로 들면 마우스 휠로 5번만 아래로 내려도 스크롤 이벤트는 엄청나게 많은 이벤트를 발생시킨다 이벤트가 일어날 때 마다 콜백함수를 실행시키게 되고, 이는 리소스를 낭비하게 될 것이다.

이러한 무수히 많은 이벤트가 일어나 성능을 저하시키는 이슈를 Debounce와 Throttle를 이용해서 이벤트 발생을 최적화하여 성능을 향상 시킬 수 있다.

그럼 이제 Debounce와 Throttle에 대해 알아보자!

Debounce#

간략하게 먼저 알아보자

요청이 들어오면 일정 시간 후에 수행하고 일정 시간 안에 요청이 들어오면 이전의 요청은 무시된다

적용할 수 있는 부분에 대해서는 예시를 하나 들어보자 어느 기능을 on/off 할 수 있는 토글 버튼이 있다고 해보자. 사용자가 토글 버튼을 반복해서 누르게 된다면 누를 때 마다 이벤트가 일어나 성능저하를 야기할 수 있다.
우리가 얻고자하는 건 최종적으로 선택한 값이기 때문에 마지막 이벤트만 알 수 있으면 된다. Debounce를 적용한다면 마지막의 요청만을 받아들여 실행시킬 수 있어 많이 일어나는 이벤트에 대해서 처리할 수 있다

Throttle#

Throttle도 간략하게 알아보자

요청이 들어왔을 때 일정 시간이 지나기전에는 요청을 받지않는다

스크롤 이벤트를 예시로 들어보자 스크롤 이벤트는 스크롤시 무수히 많이 발생하고 콜백함수로 복잡한 작업을 하도록 한다면 빈번하게 발생하는 이벤트로인해 성능저하가 일어날 것 입니다.
여기서 Throttle을 이용해서 지정한 시간마다 한 번의 이벤트를 발생시키도록 제한을 걸어줄 수 있다

구현 방법#

Debounce와 Throttle을 한 번 만들어보자
많이 사용하는 JavaScript와 React로 제작을 해보겠습니다

Debounce#

JavaScript

1
function debounce(callback, limit = 1000) {
2
  let timer;
3
  return function (...args) {
4
    clearTimeout(timer);
5
    timer = setTimeout(() => {
6
      callback(...args);
7
    }, limit);
8
  };
9
}

React

1
const useDebounce(callback,limit=1000) => {
2
    const timer = useRef()
3

4
    const debouncedFn = useCallback((...args)=>{
5
        if(timer.current){
6
            clearTimeout(timer.current)
7
        }
8
        timer.current = setTimeout(()=>{
9
            callback(...args)
10
        },limit);
11
    },[limit])
12

13
    useEffect(()=>{
14
        return () => {
15
            if(timer.current){
16
                clearTimeout(timer.current)
17
            }
18
        }
19
    },[])
20

21
    return debouncedFn
22
}

Throttle#

JavaScript

1
function throttle(callback, time = 200) {
2
  let timeout = false;
3
  return function (...args) {
4
    if (!timeout) {
5
      callback(...args);
6
      timeout = true;
7
      timeout = setTimeout(() => {
8
        timeout = false;
9
      }, time);
10
    }
11
  };
12
}

React

1
function useThrottle(callback,time=200){
2
    let wait = useRef(false)
3

4
    const throttledFn = useCallback((...args){
5
        if(!wait.current){
6
            callback(...args)
7
            wait.current = true
8
            setTimeout(()=>{
9
                wait.current = false
10
            },time)
11
        }
12
    },[time])
13

14
    return throttledFn
15
}

한동룡