이벤트가 연속으로 들어올 때, 연속된 이벤트임에도 불구하고 이벤트 함수를 한번만 실행시키고 싶을 수 있다. 이럴 때는 디바운싱 혹은 쓰로틀링을 사용하자.

디바운싱

이벤트가 발생하고 나서 일정 시간동안 추가 이벤트가 발생하지 않으면 이벤트 핸들러를 실행시킴

5개의 클릭 이벤트가 발생했고 디바운싱이 걸려있다면 가장 마지막 클릭 이벤트가 주어진 시간이후에 실행 된다. 첫번째에서 네번째까지는 계속해서 이벤트가 들어왔기 때문이다.

예시 - 무언가 검색창에 검색하려 할 때 입력 값이 다 입력되었을 때 검색 함수를 실행시키려 할 때 디바운싱을 사용할 수 있다.

var timer;
document.querySelector('#input').addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('input event!', e.target.value);
  }, 200);
});

쓰로틀링

이벤트 핸들러 함수가 실행되고 일정 시간이 지나기 전, 다시 이벤트 핸들러를 실행시키지 않는다.

5개의 클릭 이벤트가 발생했고 쓰로틀링이 걸려있다면 첫 클릭 이벤트를 실행시키고 주어진 시간동안에 들어온 클릭 이벤트는 무시할 수 있다.

예시 - 스크롤 이벤트의 경우, 마우스 스크롤 한번에 수십개의 이벤트가 발생할 수 있다. 이런 스크롤 이벤트에 쓰로틀링을 사용할 수 있다.

var timer;
document.querySelector('#div').addEventListener('scroll', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      console.log("scroll event!", e.target.value);
    }, 100);
  }
});