lodash에서 사용하는 debouce()에 대하여 알아봅니다. 입력폼에서 많이 사용되는 debounce를 사용하려면 어떻게 할까요?



# debounce() 메소드 알아보기debounce() 메소드는 이벤트에 의해 특정 함수가 여러번 반복 실행될 수 경우에 사용하며 정해진 지연시간동안 반복된 호출을 딱 1번만 호출하도록 제어해줍니다. 먼저 lodash에서 debounce() 문법은 아래처럼 사용합니다.

_.debounce(콜백함수, 시간)

실행될 콜백함수와 얼마동안의 호출을 debounce()에서 처리할 것인지 인자로 추가하게됩니다. 그럼 아래에서 몇 가지 예제를 사용하여 알아봅니다. 다른 언어나 라이브러리 등에도 debounce 기능을 가지는데 이를 사용해보지 않은 경우 이해하기 어려울 수 있습니다. 예제로 이해하는 것이 더 빠를 것 입니다.



# debounce() 예제보기아래 예제들은 실제로 웹페이지에 많이 사용되는 예제들입니다. 그럼 아래 내용을 하나씩 봐주세요.


! 직접 함수를 호출하는 경우아래에서는 2초 동안 한 번 실행하는 것과 2초 동안 3번의 함수를 실행하는 것의 결과를 보여주게 됩니다. 원래는 3번 호출하므로 3번 함수가 실행되어야 하지만 debounce()를 사용하여 똑같이 1번만 실행될 것입니다.
var showConsole = function() { console.log(1) }
_action = _.debounce(showConsole, 2000);

이제 2초 동안 함수를 1번만 실행합니다.
_action();


1  //  1번만 호출됨

이번에는 2초 동안 세번 연속해서 함수를 실행합니다.
_action();
_action();
_action();


1  //  3번 호출해도 1번만 호출됨

이처럼 2초 안에 반복 실행된 여러번의 함수는 2초가 지난 후 1번 만 동작하게됩니다. 예상된 결과였죠.


! 엘리먼트에서 이동하는 이벤트 처리에 사용, debounce()이번 예제는 이벤트 실행에 따른 퍼포먼스, 성능과 관련된 예제입니다. 특정 요소에서 이동하는 이벤트의 경우 짧은 시간 많이 동작하게 되는데 이 경우 퍼포먼스에 영향을 주게되므로 이를 제어하면 성능을 개선할 수 있습니다. 만약 이동이 멈추었을때 한 번만 동작해도된다면 불필요하게 많은 이벤트 콜백은 삭제해야하므로 이를 위해서 debounce()를 적용해봅니다.

먼저 엘리먼트를 만들고 이동하면 함수를 호출하도록 이벤트를 추가합니다.
<div class="container" id="test"></div>

아래는 스크립트 코드입니다.
showNum = function() {
  console.log(2);
};

var _ele = document.querySelector('#test');
_ele.addEventListener('mousemove', _.debounce(showNum, 100));


! 검색 입력폼에 적용하기, debounce()이번 예제는 debounce()가 가장 자주 사용되는 예제 중 하나이기도 합니다. 검색어를 입력할때 일정시간 동안 반복 입력된 경우 호출하지 않고 한 번만 호출하도록 도와줍니다. 이번 예제 역시 성능을 크게 개선하는데 이 전 예제가 클라이언트 측 성능 개선이라면 이 예제는 api 호출하는 경우 이를 크게 줄여주므로 서버측에도 성능향상이 높다 하겠습니다.
<input type="text" id="keyword" onkeyup="showResult();" />

스크립트 코드입니다.
test = function() {
  console.log('Search...');
};

showResult = _.debounce(test, 500);

여기까지 debounce의 여러 기능에 대하여 알아보았습니다.