[TIL] Debounce

프로그램을 따라 만들어보면서 기법을 배우는 시간이었다. 이전에 배웠던 기법들을 반복적으로 사용하다보니 어느새 자연스럽게 필요한 순간에 별도의 참고 코드 없이 사용할 수 있는 수준이 되었다. 그러나 몇몇은 아직 손에 익지 않은 기법도 있는데 그중 하나가 Debounce 기법이다.

Debounce

Debounce를 사용하는 이유

반복적으로 같은 일을 수행 해야하는데 네트워크에 불필요한 수준으로 반복 요청하면 서버와 클라이언트간 흐름문제, 혼잡문제가 발생할 가능성이 존재한다. 따라서 반복적인 요청을 수행하되 수행 요청에 시간적인 제약을 줌으로써 불필요한 통신을 최소화하는 것이다

코드

function debounce(fn,delay){
  let timer=null
  return function (){
    const context=this
    const args=arguments
    clearTimeout(timer)
    timer=setTimeout(()=>{
      fn.apply(context,args)
    },delay)
  }
}

debounce()가 반복 호출되도록 구현하면, setTimeout()에 의해 timer값이 올라간다. delay값에 도달하기 전에 debounce가 실행되면 timer가 0으로 리셋되면서 timer<delay되어 setTimeout()의 콜백함수가 실행되지 않는다. 반면 timer===delay인 경우, 콜백함수가 실행된다.