Throttling & Debouncing

Throttling

• 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것.
• 스크롤을 올리거나 내릴 때 주로 사용된다.

Debouncing

• 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것.
• 검색에 주로 사용된다.

디바운싱 장점

• 요즘 검색을 할 때 검색 버튼을 누르지 않아도 바로바로 결과가 나오는데 이렇게 하기 위해서는 항상 input 이벤트를 대기하고 있어야 한다.
• 하지만 이렇게 하면 어마어마하게 많은 쿼리를 요청할 것이고 비용이 높아질 것이다.
• 그래서 타자를 치는 시간 이외에 예를 들어 200ms 라는 시간을 걸어두고 (200ms 동안 입력이 없으면 호출) 요청을 보낸다.

ex)

var timer;
document.querySelector('#input').addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('여기에 ajax 요청', e.target.value);
  }, 200);
});