[JavaScript] 디바운싱 vs 쓰로틀링

웹에서 발생하는 이벤트를 제어하는 방법
불필요하게 같은 작업을 반복 실행하는것을 막아 성능을 높일 수 있다

디바운싱(debouncing)

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

어떤 때 쓰는가?

예를 들면 웹사이트에서 검색을 할 때 검색어가 완전히 완료된 후 검색 요청을 하도록 할 때 쓴다 (input 이벤트)
=> 타이머를 설정하여 일정 시간동안 입력이 없으면 입력이 끝난 걸로 쳐서 작업을 수행하고 일정 시간 전에 입력이 발생하면 이전 타이머는 취소하고 새로운 타이머를 다시 설정하는것

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

쓰로틀링(Throttling)

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

어떤 때 쓰는가?

스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생한다
스크롤 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행되기 때문에 엄청 렉이 걸릴 것이다. 그럴 때 쓰로틀링을 걸어 일정 시간 에 한 번씩만 실행 되게 제한을 두는것
=> 타이머가 설정되어 있으면 아무 동작도 하지 않고, 타이머가 없다면 타이머를 설정한다. 타이머는 일정 시간 후에 스스로를 해체하고 실행 요청을 한다

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

차이점

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