쓰로틀링과 디바운싱

도원·2022년 2월 21일
0

용어집

목록 보기
1/2

얼핏 들어서 알고는 있지만 이게 정확하게 뭔지는 몰랐던 그 용어...

  • 쓰로틀링
  • 디바운싱
쓰로틀링 : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

이렇게 찾고서 보니까 확실하게 알 것 같다.
심지어 나는 이걸 사용하고 있었다. 뜻은 모르지만 그냥 용법만 알고 사용하고 있었던 것이다.

document.querySelector('#input').addEventListener('input', function(e) {
  console.log('ajax 요청 :: ', e.target.value);
});

이와 같이 사용자가 한글자씩 입력을 했을 때마다 API 요청이 나간다고 생각을 했을 때, 단순한 [안녕]이라는 텍스트를 입력하는데 7번의 API 요청이 발생을 한다.

만약 해당 API가 유료라면 1~6번째까지의 호출은 모두 다 쓰레기 값이 나올 것이고, 비용의 손해가 발생을 할 것이다. 하나의 호출이 모두 다 비용이 발생하기 때문...

따라서 우리는 이러한 경우에 쓰로틀링과 디바운싱을 적용할 수 있다.

  • 디바운싱
var timer;
document.querySelector('#input').addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('ajax 요청 :: ', e.target.value);
  }, 200);
});

대략 다음 타자를 입력하는데 0.2초의 시간이 소요되지 않는다고 가정을 하고 0.2초 이상의 입력이 없는 경우에만 API를 호출하도록(마지막만 호출하도록) 하여 마지막 1번의 호출만 발생시키는 것이 디바운싱이다.

  • 쓰로틀링
var timer;
document.querySelector('#input').addEventListener('input', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      console.log('ajax 요청 :: ', e.target.value);
    }, 500);
  }
});


결과는 동일하다. 디바운싱과 다른 점이라면, 첫번째 입력 후, 0.5초간의 입력에 대해서는 API 호출을 하지 않는다는 점이다.

쓰로틀링이라는 단어는 보통 컴퓨터에서 사용을 자주 한다. 컴퓨터 CPU 온도가 너무 높아서 쓰로틀링이 걸린다는 말이 이 말이다. 호출 이후의 일정 간격을 두어 성능에서의 이득을 거둘 수 있는 것이다.

오늘의 느낀점 : 막 쓰지 말고, 용어를 알고 쓰자... 제발

profile
developer

0개의 댓글