디바운스와 쓰로틀

디바운스

특정 기간동안 동일 이벤트 계속 반복될 때 가장 마지막 이벤트를 실행시키는 기법

타이머를 등록하고 타이머가 끝나기 전에 호출되면 타이머를 교체하는 방식으로 타이머를 계속 초기화하면서 이벤트 실행을 마지막 이벤트까지 지연시킨다. 최종적으로 지정한 시간이 초과되면 요청한 이벤트를 실행시킨다.

let timeoutId = null;

$editor.addEventListener('keyup', () => {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = setTimeout(() => {
    console.log('마지막 키입력');
  }, 2000);
});

에디터와 같은 요소에서 마지막 키 입력이 끝났을 때 저장하는 로직에서 활용할 수 있다.

쓰로틀

일정 시간 간격으로 한 번씩만 실행하도록 하는 기법이다.

가장 처음 요청된 이벤트를 실행하고 실행이 완료될 때까지 뒤에 이어오는 이벤트 요청은 전부 무시한다.

즉 이미 이벤트 요청을 했으면 그 이벤트가 끝나기 전까지 동일한 이벤트를 전부 무시시키는 것이다.

지정한 시간이 지난 이후부터 새로운 이벤트 처리가 가능하다.

let timeoutId = null;

window.addEventListener('scroll', () => {
  if (!timeoutId) {
    timeoutId = setTimeout(() => {
      console.log('스크롤 이벤트');
    }, 2000);
  }
});

스크롤이 가장 마지막 컨텐츠에 갔을 때 새로운 컨텐츠를 네트워크 요청할 때 활용할 수 있다.

만약 쓰로틀을 걸지 않으면 스크롤이 마지막 컨텐츠에 있을 때마다 매번 네트워크 요청을 하는것을 막을수 있다.