쓰로틀 ( Throttle )

 

---

이벤트를 시간 간격을 가지고 실행시키는 기법입니다.

---

잦은 이벤트 호출 (Overclock) 은 성능 저하 와 UX 가 좋지 못하므로 고려해야 합니다.

서버에 요청을 보내는 함수나, 스크롤 함수에 많이 사용됩니다. 

 

How?

Delay 이내로 연속적으로 발생된 이벤트에 대해서는 무시한다.

일정 시간 동안 들어오는 요청을 모아서, 한번만 수행 되도록 합니다.

 

고찰

무한스크롤 (스크롤을 내릴 때 api에서 새 글을 불러옴)을 구현 시,
사용자가 스크롤을 내리는 동안에도 조금씩 새 글을 불러오게 구현해본다.

ex) 

function throttle(callback, limit = 100) {
    let waiting = false
    return function() {
        if(!waiting) {
            callback.apply(this, arguments)
            waiting = true
            setTimeout(() => {
                waiting = false
            }, limit)
        }
    }
}
 
 
//실행
window.addEventListener("mousemove", throttle(() => {
    dispThrottle.textContent = ++mouseThrottleCount
}, 500))