리액트 - throttle / debounce

브라우저 너비가 변경될떄마다 api요청을 보낸다고 하면 너무 잦은 리퀘스트 발생 

 

이벤트를 수시로 처리하고싶지 않을 때 

이벤트 제어 처리 2가지 필요

1. throttle

2. debounce 

 

두 가지 성질이 다르다 

실제 이벤트 / 이벤트 처리 (api 요청)

내가 정한 시간(이벤트 2번) 동안 1번의 이벤트만 발생 시키겠다 

 

어떤 이벤트가 끝나고 내가 정한 시간 동안 이벤트가 들어오지 않았을때 이벤트를 처리

예를 들어 브라우저 크기를 조절하려고 마우스가 브라우저 창을 잡고있을때 놓지않거나, 놓고나서 delay 시간 내에 다시 창을 마우스로 잡으면 이벤트 발생하지 않는다

 

 

- 활용 - 

검색어 자동완성 기능 활성화 ..

 

lodash 라이브러리 

throttle( 핸들러, ms )

debounce( 핸들러, ms) 

 

성능과 ux : trade off

---

직접 만들어보기 

 

const throttle = (callback, delay) => {
  // 딜레이를 처리하고 몇초 뒤에 그걸 체크해야한다 -> 타이머 필요 
let timer;

// return 도 함수 형태가 되어야한다. 
// addEventListner 의 콜백함수가 되어야하므로 
return (...args)=> {
  // 이벤트 발생하고, delay 시간 내에 또 다른 이벤트가 발생했을때 그 이벤트를 무시해야한다. = return
  if (timer) return;
timer = setTimeout(()=>{
callback(...args);
timer = null; 
// 이벤트라 처리 됐을때 다시 타이머가 없어져야한다. 
}, delay)

}
// dalay 시간 뒤에 콜백함수를 실행해주도록 작성 
}

const debounce = (callback, delay) => {
  let timer;
  
// 이벤트 발생하고 시간텀만큼 기다리다가 그 안에 이벤트 발생하면 마지막 기준으로 타임 세팅
// 처음 타이머를 없애야됨, 다시 다음 타이머 세팅 
  if (timer) clearTimeout(timer);
  return ((...args)=>{
    timer = setTimeout(()=>{
      callback(...args);
    }, delay)
  })
}

 

코드가 생각보다 짧아서 좀 신기했다.. 

그리구.. 컨셉을 듣고난 후에도 이걸 어떻게 구현해?.. 감도 안오는 난 아직 초보랍니다..