Throttling과 Debounce

Throttling

throttling은 모바일기기에서 많이 언급이 되는데 만약 모바일기기에서 오버클릭 즉, 클릭이 많이 일어났을 때 기기에 무리를 주는 것을 방지하기 위해서 일부러 성능을 낮추는 것을 말한다.

이 개념을 웹에 적용을 하면 스크롤을 할 때 여러 기능들이 실행이 실행이 되는데 이 때 많은 기능들이 실행이되면은 그 만큼 브라우저에 부하가 걸리고 에러가 발생하거나 로딩이 길어질 수 있다.

let number = 0;
const onScroll = () => {
  number++;
  console.log(number);
};
window.addEventListener("scroll", onScroll);

간단한 예시로 브라우저에서 스크롤을 했을 때 number가 1씩 추가 되면서 console창에 보여주고 있다. 그 부분을 설명하면 아래로 스크롤을 할 때마다 1씩 중가하고 이를 console창에서 끊임없이 보여준다. 지금은 가벼운 로직이어서 실행하는데 무리가 없지만 실무에서 로직이 무겁고 많은 수의 로직이 있다. 이것들이 한꺼번에 실행이 되고 연속적으로 실행이 되면 브라우저에 부하가 온다. 그래서 일부러 성능 저하를 시켜서 이 부하를 막아 주는 것이 Throttling이다.

let number = 0;
let throttler;
const onScroll = () => {
  if (throttler) return;
  throttler = setTimeout(() => {
    number++;
    console.log(number);
    throttler = null;
  }, 100);
};
window.addEventListener("scroll", onScroll);

그래서 간단한 해결책으로 임의 변수 throttler를 넣어서 이 변수사 true이면 setTimeout을 실행시켜서 01초동안 기다렸다가 실행을 시킨다. 이렇게 되면 연속적으로 실행이 되는 것이 0.1초 동안 부하가 걸리면서 연속적으로 실행이 되는 것을 막아줄 수 있다.

Debounce

debounce는 호출되는 여러 함수들 중 마지막 함수을 실행하는 것을 말한다.

	const form = document.querySelector("form");

const onSubmit = (e) => {
  e.preventDefault();
  const input = document.querySelector("#input");
  console.log("제출완료 :", input.value);
};

form.addEventListener("submit", onSubmit);

submit을 계속 누르면 계속 실행이 된다.

하지만 위 상황이 api요청이라면 어떨까. 유저가 검색을 실수해서 얼른 고쳐서 재요청할 수도있고, 장난삼아 제출버튼을 여러번 누를 수도 있다. 그렇게되면 서버에 수많은 요청이 가서 과부하가 걸릴 수도 있고, 만일 외부 api를 이용중이어서 한 번 요청에 일정금액이 청구된다면 생각만 해도 끔찍하다.

이럴 때 필요한 방식이 디바운싱이다. 모든 요청을 하나로 보고 한 번만 요청하는 것이다. 위의 사례에서도 적용할 수 있도록 가장 마지막 요청에만 실행하는 방식을 적용해보자.

const form = document.querySelector("form");
let debouncer;
const onSubmit = (e) => {
  e.preventDefault();
  const input = document.querySelector("#input");
  if (debouncer) {
    clearTimeout(debouncer);
  }
  debouncer = setTimeout(() => {
    console.log("제출완료 :", input.value);
  }, 1000);
};

form.addEventListener("submit", onSubmit);

쓰로틀링과 달리 타이머 객체 바깥에서 타이머 객체가 있으면 클리어해주는 것을 볼 수 있다.
위를 통해 시간(예시에서는 1초)안에 다시 요청이 발생하면 앞의 요청은 제거하고, 최신 요청을 1초후에 실행하도록 할 수 있다.