Problem

debounce를 이용 하고자 하면 아래처럼 타이머 핸들을 이용해서 사용하는 것을 생각할 수 있을 것이다. clearTimeout을 이용하기 때문에 같은 함수가 빠르게 호출되어도 실제로는 타임아웃 간격을 넘어선 호출만 유효하게 동작한다.

참고로 debounce는 반복적인 특정 동작을 반복되는 과정에서 강제적으로 대기하는 것을 말한다. 아주 빠르게 같은 동작을 처리하는 함수가 있을 때, 빠르게 호출되는 중간 과정을 보여주지 않고 결과를 모아 보여줘도 문제가 되지 않을 경우 많이 사용한다. 그 결과로 성능 향상을 기대할 수 있다. 예를 들어 입력 박스에 아주 빠르게 타이핑 하는데 매 입력 시 마다 처리해야 할 무언가가 있을 경우 빠르게 타이핑되는 중간 과정을 생략하고 멈췄을 때 결과를 debounce를 이용해 보여줄 수 있다.

const onChange = () => {
	clearTimeout(timerHandle);
	timerHandle = setTimeout(function() {
	...
	}, 500);
}

Solution

lodash1를 이용하면 아래 처럼 보다 간단하게 작성할 수 있다. lodash는 순수 자바스크립트로 작성된 유틸리티를 제공하는 라이브러리인데 빠르고 직관적이면서 사용도 간편해서 많이 사용되고 있다. 참고로 lodash 내부의 debouncesetTimeoutclearTimeout을 이용해서 구현2되고 있으므로 동작 방식이 위 코드와 크게 다르지 않았다.

import { debounce } from 'lodash';
...
const onChange = () => {
	console.log("This is a onChange");
	debounceOnChange();
};

const debounceOnChange = debounce(() => {
  console.log("This is a debounce function");
}, 500);

References