[CS] 디바운스와 쓰로틀

❓디바운스와 쓰로틀은 왜 사용되는가?

대표적으로 인풋창의 입력값을 입력할 때와 같은 상황에서 디바운스와 쓰로틀이라는 알고리즘이 이용됩니다.

 

그런데 이런 알고리즘이 왜 사용될까요?

 

개발을 할때 로컬 환경에서 인풋창입력을 테스트하면 아무 문제가 없어보입니다.

 

하지만 이것은 어디까지나 브라우저가 로컬로 처리되기 때문입니다.

 

만약 자동완성기능이 있는 검색창이라면 사용자가 타이핑할때마다

 

서버에 요청을 보내기 때문에 데이터 사용량이 많아지고 성능도 저하됩니다..

 

이런 상황을 방지하기위해 디바운스와 스로틀이 사용됩니다

---

⏸️ 디바운스

디바운스는 함수가 호출되자마자 실행되는것이 아닌 일정 시간이 지난후에 실행됩니다.

 

그리고 새로운 호출이 생기면 이전의 호출은 리셋됩니다.

 

어러한 기능은 타이머 기능으로 구현이 가능합니다.

function debounce( callback,delay = 1000 ){
    let timer // 계속 함수가 호출되어도 여기서 timer는 계속 초기화 됩니다

    return function(...args){
      if(timer){ // 타이머에 값이 있다면 타이머를 초기화시킵니다
        clearTimeout(timer)
         }

    timer = setTimeout(()=>{
        callback.apply(this,args) // 호출시 this와 인자를 유지해서 callback실행
    },delay)
  }
}

---

⏱️ 스로틀

스로틀은 사용자가 입력하면 바로 한번 함수가 실행되고 그 후 일정 시간동안은 추가적인 호출을 무시합니다.

 

즉, 일정간격으로 함수가 실행되도록 만드는 알고리즘입니다.

function throttle( callback,timeout  = 400 ){
  let isCalled = false // called의 상태를 할당

  return(...args){
    if(!isCalled){ // isCalled가 false일때 실행 
      setTimeout(()=>{
      callback(...args) // 콜백함수 실행
      isCalled = false // 실행 끝나면 false가 됨
    },timeout)
    isCalled = true // 호출이 끝나면 호출 차단
  }
}

---

언제 무엇을 사용해야 할까?

디바운스 : 마지막 호출 후 일정 시간 아무 입력이 없을 때

(예시) 검색창 자동완성, 폼 자동저장

 

스로틀 : 입력이 계속 발생해도 일정시간마다 실행시켜줘야 할 때

(예시): 드래그 앤 드롭, 스크롤 이벤트, 윈도우 리사이즈

 

 

 

디바운스와 스로틀을 재밌게 그려낸 페이지링크입니다 

https://kettanaito.com/blog/debounce-vs-throttle