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