짧은 간격으로 이벤트가 지속적 또는 불특정간격으로 발생할때 모든 이벤트를 처리하면 시스템부하가 발생한다.
짧은 간격의 이벤트는 무시하고 마지막 이벤트로부터 정해진 밀리초동안 이벤트가 발생하지 않으면 필요작업을 수행한다.
이벤트가 발생하면 정해진 밀리초후에 처리(함수호출등)한다.
이벤트가 발생하고 정해진 밀리초전에 이벤트가 발생한다면 이전 이벤트는 취소하고 새로운 이벤트가 정해진 밀리초후에 처리되도록 한다.
예) 검색어 ajax
검색어글자 입력이벤트로부터 200밀리초가 지나면 입력이 완료된것으로 간주하여 서버로부터 결과를 받아 출력한다.
프로그램을 만들다보면 디바운싱이 필요한 함수를 만드는 경우가 있을 것이다.
함수에 디바운싱코드를 추가하는 것보다 디바운싱 데코레이터함수로 만들어 사용하는것이 좋다.
디바운스 로직
정해진 시간이내에 발생되는 이벤트는 취소하는것이 핵심이다.
function debounceDecorator(func, ms) {
let timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, arguments), ms);
};
}데코레이터는 이벤트가 ms시간이후에 처리되도록 설정한다.
예를 들어 a이벤트가 발생하면 ms시간 이후에 처리될 예정이다.
b이벤트가 a가 처리되기 이전에 발생했다면 ms시간이전에 발생한 것이므로 취소되어야 한다.
clearTimeout(timeout);이 수행된다는 것은 ms시간 이전에 발생했다는 것으로 이전 이벤트를 취소하고 새롭게 ms시간의 이벤트가 시작한다.
이벤트마다 시간을 저장하고 새로운 이벤트가 발생했을때 시간과 비교해서 이벤트취소를 하려는 로직을 생각할 것이다.
로직의 호름을 이해하는것이 핵심조건을 로직으로 만드는 것이 중요하다.
