[비공개] 디바운스와 스로틀링

// 디바운스 : 입력하다가 특정시간동안 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버 요청
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), 1000);

run('a');
run('b');
run('2');
// 1초뒤 2 출력

// 스로틀링: 첫번째 요청이 지연 실행되는 동안에 중복된 요청을 무시하고 실행
// 이후에 첫 번째로 호출되는 요청을 동일하게 지연 실행하여 구간 내에서는 중복 요청 과정을 생략
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);