[javascript / react] throttle vs debounce

https://images.velog.io/images/broccoliindb/post/7f080de7-e342-466e-a180-8d712023c850/debounce_throttle.png

 

사용자와의 인터랙션중에 수많은 API요청이나, 액션들로 인해 우리의 사이트가 느려질 수가 있습니다.

이중 가장 흔한 건 scroll event, keydown event .. 같은 종류들입니다.

오늘은 scroll event를 인식할 때 동작 하기 위한 throttling 과 debounce에 대해 알아보겠습니다.

우선 둘다 이벤트나 함수 실행의 빈도를 줄이고 효율성을 올리기 위한 함수들입니다.

 

1. Throttling 

Throttle 는 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아, 한번씩 출력을 제한한다.

예시로는 javascript 라이브러리인 lodash 의 throttle, debounce를 사용하겠습니다.

_.throttle(func, [wait=0], [options={}])

우선 기본 형태입니다.  함수 func, 시간제한, 옵션을 매개변수로 사용합니다.

만약 스크롤 이벤트를 감지할때 사용한다 하면,

// ...react example
import _ from "lodash";

...

function scrollEventFunc(){
	console.log(window.scrollY)
}

...

useEffect(()=> {
	window.addEventListener('scroll', _throttle(scrollEvent, 300));
    
    ...
}, [])

이러한 형태가 될것입니다. (물론 unmount에 eventListener를 삭제해 줘야하지만 생략하겠습니다)

 

2. Debounce

이는 주로 수많은 API요청 이나 호출을 제한하는데 쓰입니다.

...

const inputChanged = debounce((e) => {
	// call api or some
}, 200);


...

<input onChange={e => inputChanged(e)} ... />

...

Debounce는 input변화에 따라 2초를 기다렷다가 실행합니다. 그 2초동안에는 함수 안의 내용이나 어떠한 것들이 실행되지 않고 기다립니다.

 

throttle 과 debounce는 얼핏 비슷해 보이지만 debounce는 해당 이벤트가 진행되는 동안 다시 실행 하지 않고 기다리는 반면 throttle은 해당 주기 동안 event를 보장해줍니다.