debounce?

debounce 는 짧은 시간동안 들어오는 수 많은 요청들을 취소하고 마지막 요청만을 처리하기 위한 기술입니다

검색어 자동완성

debounce를 적용한 예로는 검색어 자동완성기능이 있습니다

네이버 검색창에 개발자 라고 검색한다고 해봅시다

사용자가 검색창에 어떤 단어를 검색하면 검색어에 맞는 자동완성 기능을 보여주는 수행 한다고 했을 때, 과정은 다음과 같을 것입니다

ㄱ 자동완성 기능 수행
개 자동완성 기능 수행
갭 자동완성 기능 수행
개바 자동완성 기능 수행
......

이렇게 키보드를 입력하는 모든 요청마다 자동완성 기능을 수행하는 것은 상당히 비효율적이라는 것을 알 수 있습니다

그래서 모든 요청 대신 마지막으로 들어오는 요청 단 한번만 처리한다면 훨씬 효율적으로 리소스를 관리하며 사용자에게 결과를 보여줄 수 있습니다

debounce는 짧은 시간에 들어오는 수많은 요청을 취소시키고 마지막 요청 단 한번만 수행합니다

코드

debounce 코드 구현을 하기 위해서는 먼저 알아야할 내용이 있습니다

setTimeout

• setTimeout은 타이머 함수로서 일정 시간이 지나면 콜백함수를 실행합니다
• 반환값인 timeoutID는 setTimeout()을 호출하여 만들어진 타이머를 식별할 수 있는 값 입니다

타이머를 구별 할 수 있는 timeoutId를 통해 setTimeout으로 불러낸 콜백함수들을 취소 시킬 수 있습니다

debounce 코드

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

func : 실행할 함수
timeout : 이 시간 내로 들어오는 요청들은 취소됩니다
args : 함수에 들어갈 인자들이 몇 개인지 모르기 때문에 인자들을 그대로 넘겨주기 위해 ...args를 사용합니다

---

1. 함수 debounce는 ...args를 인자로 새로운 하는 화살표 함수를 return합니다

2. 화살표 함수가 실행되면 첫 번째로 이전의 setTimeout() 함수를 취소시킵니다

3. 두 번째로 func를 콜백함수로 하는 setTimeout()을 실행시킵니다

사용자가 입력을 하게되면 2,3번이 계속 반복되다가 마지막 입력에서야 3번만이 실행이 되어 콜백함수를 실행할 수 있습니다

---

참고자료)

freeCodeCamp - Debounce – How to Delay a Function in JavaScript (JS ES6 Example)