[TIL] 디바운싱과 쓰로틀링에 대해서 설명해주세요.

매일메일이라는 서비스를 이용해 TIL을 작성하려고 한다.

매일메일에서 질문을 받고 해당 질문에 대해 공부하는 방식이다.

매일메일은 기술면접 질문을 매일 메일로 보내주는 서비스이다. 혹시 서비스가 궁금할 수 있는 사람들을 위해 아래 링크를 첨부한다!

https://www.maeil-mail.kr/

매일메일 - 기술 면접 질문 구독 서비스

 

오늘의 질문은 디바운싱과 쓰로틀링에 대해 설명하는것이다.

디바운싱 (debouncing)

디바운싱은 이벤트가 무수히 많이 발생하더라도 마지막 이벤트를 기준으로 일정 시간이 지나면 1번만 이벤트를 진행하는 기법이다.

 

예를 들어서 NAVER에 검색을 할 때 검색창에 타자를 입력하게 되면 엔터를 입력하지 않아도 관련 검색어를 바로 보여주게 된다. 

엔터 없이 결과를 보여주려면 항상 이벤트가 대기하고 있게 되는데 한 글자씩 입력할 때마다 요청하게 되면 바로 API의 요청이 

엄청나게 쏟아지게 된다. 많은 양의 API 요청이 타자를 입력할 때마다 전송되게 되는 것이다!!

 

그럼 이제 디바운싱을 구현해보자

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

 

위 코드의 경우 input에서 event가 발생할 때마다 타이머를 설정하게 된다.

200ms 이전에 타자 입력이 발생하면 이전 타이머는 취소하고 새로운 타이머를 다시 설정하는 것이다.

이렇게 되면 더는 여러번 호출하지 않게 된다. 이렇게 디바운싱을 구현할 수 있다.

 

쓰로틀링 (throttling)

쓰로틀링은 이벤트가 무수히 많이 발생하더라도 일정 시간동안 이벤트가 1번만 진행되게 하는 것이다.

 

예를 들어 스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생한다. scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행되기 때문에 엄청 렉이 걸릴 것이다. 그럴 때 쓰로틀링을 사용한다. 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것이다!

 

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

 

위 코드의 경우 이제 200ms마다 이벤트 요청을 보내게 된다.

 

자료 참고는 zerocho님의 글을 참고했다.

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa