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

 

 

프론트에서의 상태 변경과 관련해 매번 백에 API를 요청하는 것이 아닌 일정 시간을 두고 요청하는 것과 관련해,

코치님께서 '디바운싱과 쓰로틀링'을 언급해주셨다.

'디바운싱과 쓰로틀링'을 개발과정에서 사용해보고자 정리를 해본다.

 

 

디바운싱

• 함수 실행 요청이 연속적으로 들어온 경우 가장 마지막(혹은 제일 처음) 요청만 수행

 

ex. 검색창에 "front"를 검색한다고 해보자. 일반적인 경우에는 글자를 입력할 때마다 API 요청을 하게 된다. 이 경우에는 너무 많은 요청이 들어가게 되고 서버에서는 자원 부담 및 부하로 이어질 수 있다. 더불어 아무 글자나 마구잡이로 계속해서 입력하다보면 그 때마다 API 요청이 되어 호출 낭비가 된다.

디바운싱의 경우, 정해진 시간이 지나기 전에 입력이 들어온다면 기존 시간은 잊고 새롭게 시간을 다시 설정해서 항상 마지막 요청이 실행된다. 2초의 타이머를 설정한다면 2초 동안 입력이 없을 때 입력이 끝난 것으로 간주한다. 만약 2초 이전에 타자 입력이 발생하면 타이머는 취소하고 새롭게 타이머를 다시 설정한다. 그래서 2초 동안 입력이 없을 때 한 번 호출이 되어 여러번 연달아 호출되는 것을 막을 수 있다.

 

let timer;
document.querySelector('#input').addEventListener('input', function(e) {
  // 2초 전에 입력 발생할 경우
  if (timer) {
    clearTimeout(timer); // 기존 타이머 취소
  }
  
  // 입력 후 2초의 시간이 지난 경우
  timer = setTimeout(function() {
    console.log('API 요청', e.target.value);
  }, 2000); // 새로운 타이머 설정
});

 

---

쓰로틀링

• 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 수행
• 쓰로틀링의 경우, 성능 문제 때문에 많이 사용

 

ex. 스크롤을 위아래로 움직일 때 이벤트가 많이 발생하는데, 이때 복잡한 작업을 하도록 설정했담녀 빈번하게 실행되어 렉이 많이 걸린다. 이때 쓰로틀링을 걸어주어 몇 초에 한 번, 혹은 몇 밀리초에 한 번씩만 실행하게 제한을 둔다.

혹은 앞의 디바운싱 예시에서 쓰로틀링으로 대체해서 사용도 가능하다. 중간중간 검색 결과를 보여주고 싶다면 타이머를 설정하고 해당 시간동안 아무 동작을 하지 않고 일정 시간 후 스스로 해제해 요청을 날린다. 

 

let timer;
document.querySelector('#input').addEventListener('input', function (e) {
  // 타이머 없다면 타이머 설정
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      console.log('API 요청', e.target.value);
    }, 2000);
  }
});

 

 

 

참고자료

https://medium.com/%EC%98%A4%EB%8A%98%EC%9D%98-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-e02f6bb14627

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