Dali's FrontEend Dev Log

Debounce and Throttling

Intro

안녕하세요 달리입니다. 오늘은 Event 처리 기법 중에 하나인 debounce와 throttle에 대해서 얘기해보려 합니다

두 기법은 짧은 시간안에 이벤트 감지가 (사람 입장에서는 거의 연속적으로 일어나는) 부분에 이벤트를 일정 시간 주기를 줘서 효율적으로 처리하는 기법입니다.

Throttling 시간 동안 한 번 만 실행되게 하는 함수

ex) 0.1ms 동안 한 번만 실행 나머지 event 무시

debounce 최소, 시간 주기가 지나여 이벤트가 실행되게 하는 함수

적절한 예) 엘리베이터에 문이 사람을 태우고 올라가는 상황가 잘 맞아 떨어진다. 이벤트가 발생해서 문을 열고 사람을 태웠다. 묻이 닫히기 전에 다시 이벤트가 발생하면 문이 열린다. 😄

debounce: 나 0.1초 안 쉬고 달렸으니 다음 일은 거부한다 term이 0.1초 있어야 한다. throttle: 0.1초동안 한 번만 처리할거야, 다음 일은 그 다음 0.1초에

주로사용 되는 곳

throttle: 스크롤 이벤트  debounce : 자동완성 검색 input 등 , 어느정도 연석된 키 입력 이벤트에 많이 쓰임

resizing , drag & drop 등

직접 구현해보기

  1. debounce
export default (function() {

  let timer = null;
  function debounce(handler,  cycle = 200) {
    try {
      if(typeof !==function){
        throw Error('함수를 받아야 합니다')
      }
    }
    catch(error){
      console.log(error);
    }
    if(timer){
        clearTimeout(timer)
    }
    timer = setTimeout(handler, cycle)
  }
  function throttling(handler,  cycle = 200) {
    try {
      if(typeof !==function){
        throw Error('함수를 받아야 합니다')
      }
    }
    catch(error){
      console.log(error);
    }
    if(!timer){
        timer = setTimeout(()=>{
          timer = null;
          handler()
        }, cycle)
    }
  }
  return {
    debounce,
    throttling
  };
})()


eventHelper.debounce((e)=>handler(e.target.value))

lodash 같은 유틸 함수를 참고해보면서 구현해보는 것도 좋은 방법이다.

참고문헌