[javascript] scroll event 사용해보기 with throttle 기법

throttle 기법

• 일정 시간동안 발생한 이벤트를 한번만 처리하는 방법
  • 에를 들어 throttle을 활용하면 1총 동안 이벤트가 여러 번 발생해도 이벤트 내부 함수는 1번만 실행할 수 있게 구현 가능합니다.
• scroll 이벤트와 연속적으로 호출되는 이벤트를 처리할 때 유용합니다.

let timerId;

const handleToDoListScrollEvent = (e) => {
  // 스크롤이 맨 아래 쪽에 있지 않으면 early return
  if (e.target.offsetHeight + e.target.scrollTop < e.target.scrollHeight) {
    return;
  }

  // timerID가 Truthy한 값이면 early return
  if (timerId) {
    return;
  }

  timerId = setTimeout(() => {
    timerId = null;

    console.log(
      '스크롤 이벤트 발생',
      e.target.scrollHeight,
      'scrollTop: ',
      e.target.scrollTop,
      'offsetHeight: ',
      e.target.offsetHeight
    );
  }, 1000);
};

// $toDOWrapper은 id가 #to-do-wrapper인 div 태그
const $toDoWrapper = document.querySelector('#to-do-wrapper');

$toDoWrapper.addEventListener('scroll', handleToDoListScrollEvent);

---

참고 자료
mdn web docs - scroll

읽어 주셔서 감사합니다 :)
잘못된 부분이 있다면 댓글로 편히 알려주세요.