출처: 두잇! 리액트 프로그래밍 정석

디바운스 (debounce)

어떤 내용을 입력하다가 일정 시간 동안 대기하고 있으면 마지막에 입력된 내용을 서버에 요청을 보내는 방법. 구글 검색창에 입력을 멈추면 연관검색어 목록이 나타남.

function debounce(func, delay) {
  let inDebounce;
  return function(...args) {
    const context = this;
    if (inDebounce) {
      clearTimeout(inDebounce);
    }
    inDebounce = setTimeout(
      () => func.call(context, ...args),
      delay);
  }
}

// const run = debounce(val => console.log(val), 100);

// run('a');
// run('b');
// run('2');
// .... 100ms이후
// 2

스로틀 (throttle)

디바운스와 비슷한 개념이지만 입력되는 동안에도 바로 이전에 요청한 작업을 주기적으로 실행함. 보통 무한 스크롤 기능을 구현할 때 사용

export function throttle(func, delay) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const context = this;
    if (!lastRan) {
      func.call(context, ...args);
      lastRan = Date.now();
    } else {
      if (lastFunc) clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= delay) {
          func.call(context, ...args);
          lastRan = Date.now();
        }
      }, delay - (Date.now() - lastRan));
    }
  }
}

var checkPosition = () => {
  const offset = 500;
  const currentScrollPosition = window.pageYOffset;
  const pageBottomPosition = document.body.offsetHeight - window.innerHeight - offset;
  if (currentScrollPosition >= pageBottomPosition) {
    // fetch('/page/next');
    console.log('다음 페이지 로딩');
  }
};
var infiniteScroll = throttle(checkPosition, 300);
window.addEventListener('scroll', infiniteScroll);