[Javascript] Debounce (디바운스)

엔터 버튼을 누르지 않아도 키보드 입력에 이벤트를 걸어

검색결과가 출력되는 기능을 구현할 때가 있다.

 

하지만 api를 호출하여 검색 결과를 출력해야 할 경우

키보드를 입력 할 때마다 이벤트가 실행되기 때문에 불필요한 api호출을 하게 된다.

 

즉, "안녕" 입력 시 총 6번의 api호출을 하게 되는 셈이다. (ㅇ, 아, 안, 안ㄴ, 안녀, 안녕)

 

Debounce기법을 사용하여 빠르게 키보드를 입력 할 경우

6번의 호출 대신 마지막으로 입력된 키워드를 사용하여 한번의 api호출을 할 수 있다.

 

Debounce

연속으로 함수가 호출 될 경우 마지막 함수(or 처음 함수)만 호출하도록 하는 것

 

간단한 코드 예시는 아래와 같다.

let timer;

$searchInput.addEventListener('keyup', function (e) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      updateApi(e.target.value);
    }, 200); 
})

setTimeout() 메서드를 사용하여 key를 입력 할 때마다 timer를 초기화해주고

새로운 timer를 담아준다.

 

지정한 200ms이 지나지 않은 상태에서 키 입력이 이루어질 경우

기존에 대기 상태에 있던 setTimeout안의 함수는 초기화되고 새롭게 함수가 세팅이 되어

마지막으로 입력한 키워드로 api호출을 할 수 있다.

 

 

참고:

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa