Throttling / Debouncing

기기의 cpu/gpu등이 지나치게 과열될 때 기기의 손상을 막고자 클럭과 전압을 강제로 낮춤.
프론트에서도 비슷하다.

throttling

사용 목적

• 이벤트 그룹화로 불필요한 이벤트 오버클럭으로 인한 소프트웨어의 손방을 방지하기 위해 사용한다.

ex)
예를 들어 사용자가 읽던 포스트의 위치를 기억하고 재방문 시 그 페이지를 보여준다.
js Scroll 이벤트를 이용해서 스크롤단위로 페이지 좌표를 서버에 기록? => 서버부하

사용 방법

• 발생되는 이벤트 중간에 delay를 포함 -> delay 이내에 연속되는 이벤트는 무시 (필터링 개념)
• 타이머 함수가 사용되며 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격으로 콜백 함수의 실행을 보장한다.

function throttle(callback, limit) {
  let delay= false;
  return function () {
    if (!delay) { // limit전까지 if문 실행안함
      callback.apply(); // 콜백함수 실행
      delay= true;
      setTimeout(() => {
        delay= false;
      }, limit);
    }
  };
}
window.addEventListener(
  "keyup",
  throttle(() => {
    // 예를들어 서버요청?
  }, 500)
);

Debouncing

사용 방법

• 이벤트핸들러가 주기적으로 여러개의 발생한 이벤트를 하나로 묶어서 처리 (그룹핑 개념)
• 먼저 발생한 이벤트를 대기-> 새 이벤트 발생 시 이전 이벤트 대기 취소-> 해당 이벤트 기준으로 다시 대기-> 머자막 이벤트 처리-> 마지막 이벤트가 실행되고 나서 일정 시간 동안 해당 이벤트가 다시 실행되지 않으면 해당 이벤트의 콜백 함수를 실행한다.

cf) Leading edge (or “immediate”)를 사용하면 그룹의 첫 이벤트를 발생시킬 수 있다.

function debounce(callback, limit) {
  let timeout;
  return function () {
    clearTimeout(timeout); // 여기서 타임아웃을 삭제하기 때문에 (2)
    timeout = setTimeout(() => { // 실행안됨 (3)
      callback.apply(); 
    }, limit); // limit이 지나기 전에 반복해서 호출하면 (1)
  };
}

inputDebounce.addEventListener(
  "keyup",
  debounce(function () {
    // 처리할 이벤트 
  }, 500)
);