[JavaScript] Throttle

이 개념도 책(Do it 리액트 프로그래밍 정석)에서 본 내용인데

 

Throttle이란 개념은 Debounce(include-note.tistory.com/entry/JavaScript-Debounce)와 유사하지만

입력되는 동안 이전에 요청했던 작업들이 주기적으로 실행된다는 점이 다르다.

Throttle의 경우 명령이 동작하고 있는 도중에 새 명령이 들어오는 경우 새 명령을 무시하도록 구현하면 된다.

 

이 개념이 주로 사용되는 App은 Facebook이다. Facebook의 경우 아래로 스크롤될 때 스크롤되는 동안 새로운 페이지가 계속해서 로드되는 것을 볼 수 있다. 만약 Throttle이 아닌 Debounce라는 개념이 적용되었다면 스크롤이 멈추기 전까지는 새로운 페이지가 로드되지 않는 문제가 발생할 수 있다.

 

Throttle을 이용하여 스크롤 시 페이지를 계속 업데이트하는 로직은 아래와 같이 구현할 수 있다. 

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 (delay - (Date.now() - lastRan)) {
                    func.call(context, ...args);
                    lastRan = Date.now();
                }
            }), delay - (Date.now() - lastRan);
        }
    }
}

var checkPos = () => {
    const offset = 500;
    const curScrollPos = window.pageYOffset;
    const pageBottomPos = document.body.offsetHeight - window.innerHeight - offset;
    if (curScrollPos >= pageBottomPos) {
        // reload
        console.log("load next page");
    }
};

var infiniteScroll = throttle(checkPos, 300);
window.addEventListener('scroll', infiniteScroll);