2023-11-06-TIL

Today I Learned

Debouncing and Throttling

검색창 입력이나 스크롤처럼 짧은 시간에 이벤트가 수십, 수백 번 발생하는 경우, 이벤트마다 무거운 작업을 하면 화면이 버벅이거나 서버로 요청이 쏟아진다. 디바운싱과 스로틀링은 이벤트 처리 횟수를 줄이는 두 가지 방법이다.

디바운싱은 호출이 멈출 때까지 기다렸다가 한 번만 실행한다. MDN은 너무 가깝게 붙어서 일어나는 호출을 버리고 하나의 호출로 합치는 것이라고 정의한다. 대표적인 예가 검색어 자동 완성이다. 사용자가 타이핑하는 동안은 아무것도 하지 않다가, 입력이 멈추면 그때 요청을 보낸다.

function debounce(fn, wait) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
}

input.addEventListener("input", debounce(e => search(e.target.value), 300));

새 호출이 들어올 때마다 이전 타이머를 지우기 때문에, 마지막 호출 뒤 300ms 동안 조용해야 search가 실행된다.

스로틀링은 호출이 계속 들어와도 정해진 최대 빈도로만 실행한다. MDN은 scroll 이벤트를 예로 든다. 스크롤 이벤트는 픽셀 단위로 발생할 수 있어서, 무거운 처리를 매번 하면 끊김(jank)이 생긴다. 10ms에 한 번처럼 빈도를 제한하면 화면은 계속 갱신되면서 불필요한 작업은 줄어든다.

둘의 차이는 “계속 호출될 때 실행되느냐”로 구분하면 쉽다. 디바운싱은 호출이 이어지는 동안 한 번도 실행되지 않을 수 있고, 스로틀링은 호출이 이어져도 일정 간격으로 실행된다. 두 방식 모두 처음 호출(leading edge)에 실행할지, 마지막(trailing edge)에 실행할지, 둘 다 할지 고를 수 있다.

• 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