[Javascript] 디바운싱과 쓰로틀링

디바운스와 쓰로틀링 모두 웹에서 발생하는 이벤트를 제어하는 방법이다.

예를 들어 스크롤 이벤트의 경우 스크롤링 할 때마다 발생하는데, 그 때마다 같은 작업을 실행하게 되면
성능 문제가 발생할 수 있다.
디바운스와 쓰로틀링을 적절한 상황에서 사용하여 그런 상황이 발생하지 않도록 막을 수 있다!

디바운싱 (Debouncing)

연속으로 호출되는 함수들 중에 마지막에 호출되는 함수(또는 제일 처음 함수)만 실행되도록 하는 것

최근, 브라우저 resize 이벤트 시 실행되어야 하는 내용을 작업하면서서 디바운스를 실제로 사용해보았다.
resize 이벤트는 브라우저의 크기를 줄이거나 늘리는 와중에 계속 발생하는데 그 때마다 내부 로직이 실행되면 성능 상의 문제가 생길 수 있다.
그래서 debounce를 사용하게 되었다.

// jquery를 사용하는 프로젝트였음
let timer;

$(window).resize(function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    // 실행할 코드 내용
  },200)
});

이벤트가 발생할 때마다 이전에 설정해둔 내용을 clear시키고 다시 새로 timer를 설정해준다.
설정해둔 시간(여기서는 200ms) 내에 이벤트가 다시 발생하지 않으면 이벤트 발생이 끝난 것으로 생각해서 적어둔 코드 내용이 실행된다.

검색해봤을 때 ajax 검색에서 디바운싱을 많이 사용하는 듯 싶다.

var timer;

document.querySelector('#input').addEventListener('input', function(e) {
    if(timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        // 실행 코드 내용
    }, 200);
});

쓰로틀링(Throttling)

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

쓰로틀링은 주로 스크롤 이벤트에서 많이 사용하는 것 같다.

var timer;
document.querySelector('.body').addEventListener('scroll', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      // 실행할 코드 내용
    }, 200);
  }
});

timer에 값이 없으면 timer를 설정해준다.
일정 시간이 지난 후에는(위에서는 200ms) 스스로를 해제시킨 후 작성한 내용을 실행시킨다.

차이점

디바운싱은 이벤트가 연속적으로 계속 발생하더라도 모두 무시하고 설정한 특정 시간동안 이벤트가 발생하지 않았을 때 맨 마지막 이벤트를 딱 한번 발생시키지만
쓰로틀링은 설정한 특정 시간 주기로 계속 실행이 된다. 따라서 실행 시키고 싶은 코드 내용이 실행이 되긴 한다.(특정 시간 주기로)