사용목적

예를 들어 우리가 스크롤 할때 이벤트를 발생시킬 경우 스크롤을 몇번만 내려도 수 많은 이벤트가 발생하게 된다.

이런 스크롤 이벤트에 의해 동작하는 무언가가 있다면? 매끄럽게 동작하지 못하고 극심한 렉이 걸리게 된다.

그렇다면 해결 방안은 무엇일까?

제한을 걸어두는 것이다.
몇 초에 한번, 또는 몇초 이후에 한번씩만 실행되게 제한을 걸어두면 해결된다. 아래 두가지 방법을 알아보자.

Debounce 와 Throttle

Debounce

Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.
즉, 순차적 호출을 하나의 그룹으로 "그룹화"할 수 있다.

바로 예시를 통해 알아보도록 하자

그냥 input 이벤트

Debounce 처리한 이벤트

let time;
document.querySelector('input').addEventListener('input', (e) => {
    if(time) clearTimeout(time);
    time = setTimeout(() => {
        console.log(e.target.value);
    },1000);
});

우리가 '안녕' 이라고 작성하게되면 ㅇ 아 안 안ㄴ 안녀 안녕 총 6회인것 같지만 확인해보면 총 7회 이다.

DD의 의견에 의하면 한글은 조합이되어 하나의 음절이 되면 또 하나의 input으로 인정하는것 같다.
따라서 ㅇ 아 안 안 안ㄴ 안녀 안녕 이렇게 총 7회가 된다.

동작 원리를 보자.

처음 time는 undefined가 뜨고 setTimeout이 실행되 time은 1이된다 그 후 if(time) clearTimeout(time)가 동작하여 time가 1일때 setTimeout 동작이 취소되게 된다.
결국 마지막 setTimeout의 결과만 살아서 동작하게 되어 안녕 이라는 결과값이 한번만 출력될 수 있는 것이다.

Throttle

throttle은 이벤트를 일정한 주기마다 발생하도록 하는 기술이다.
예를들어 throttle의 설정시간으로 1ms를 주게되면 해당 이벤트는 1ms 동안 최대 한번만 발생하게 된다.

차이점

Debounce와throttle의 가장 큰 차이점은 throttle은 적어도 x초 마다 정기적으로 기능 실행을 보장한다는 것이다. 반면 Debounce는 아무리 많은 이벤트가 발생하더라도 모두 무시하고 특정 시간사이에 어떤 이벤트도 발생하지 않았을때 딱 한번만 마지막 이벤트를 발생시킨다.