Debounce 함수로 이벤트 처리 최적화

https://choi95.tistory.com/56

Infinite Scroll

이전 포스팅에서 onScroll 이벤트의 scrollingElement 프로퍼티를 통해 무한 스크롤 뷰를 구현하였다.

 

하지만 이와 같이 onScroll 이벤트 리스너로 이벤트를 지속적으로 감지할 경우 수행하고자 하는 연산 처리들이 스크롤 이벤트가

발생할 때마다 수행된다는 문제가 있다.

 

Throttle과 Debounce

이러한 반복적인 이벤트 처리를 해결하기 위해서 두 가지 방법이 있다.

• Throttle: 일정시간간격으로 한번씩만 실행
• Debounce: 마지막으로 한 번만 수행

setTimeout()과 clearTimeout() 함수를 이용한 Debounce() 함수를 구현하여 주어진 일정 시간 동안 마지막으로 요청한 이벤트 처리만을 수행하도록 한다.

(clearTimeout()을 통해 반복 수행을 막기 위해 사전에 식별 변수를 null로 선언하여 주고 클로저를 통해 이를 활용한다)

 

Code

export const debounce = (func, delay) => {
  let timeoutId = null;
  return function (...args) {
    const context = this;
    if(timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(context, args), delay);
  }
};