[javascript / react] throttle vs debounce
사용자와의 인터랙션중에 수많은 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를 보장해줍니다.