[자바스크립트] 쓰로틀링 - 이벤트 실행 제어하기

[자바스크립트] throttling - 이벤트 실행횟수 제한

 

 

 

 

 

 

 

 

 

 

 

 

너무 많은 이벤트가 지속적으로 발생할 시, 과부화를 일으켜 사용자 환경에 버벅거림을 줄 수 있다.

이를 막기위해, 하나의 이벤트가 실행되는 동안은 같은 이벤트가 또 실행되지 않도록 제한을 주는 기술이다.

 

 

 

 

 

 

 

[사용법]

 

var temp;

document.addEventListener('scroll', function() {
    if(!temp) {
        temp = setTimeout(function() {
            temp = null;
            //type your code here

        }, 500);
    }
})

 

 

 

 

 

 

[간단원리]

 

• 이벤트 발생시, 먼저 timeout 이 존재하는지 확인 후, 존재한다면 아무것도 안함
• 만약 timeout 이 존재하지 않는다면, 새로운 timeout 을 생성
• timeout 내부 코드를 실행하면서, timeout 을 다시 null 값으로 셋팅
• timeout 이 실행되는 동안에는 같은 이벤트가 발생하더라도 아무것도 안하고,
• timeout 이 null 값이 되고 나서야 새로운 이벤트 요청을 받아들인다.

 

 

 

 

 

간단히 예시를 들면,

스크롤을 내렸을 때 timeout 이 생성되어 동작하는 500ms 동안은 다른 스크롤 이벤트가 처리되지 않는다.

결과적으로 스크롤이 내려가고 있는 동안 timeout 내부의 코드는 500ms 마다 실행된다. (마치 interval 처럼)

 

 

 

 

 

 

 

 

 

 

 

쓰로틀링은 연속적인 이벤트를 제어하는 강력한 기술이다.

자매품으로는 마지막 이벤트만을 캐치하여 실행하는 디바운싱이 있다.

https://devinserengeti.tistory.com/29

[자바스크립트] 디바운싱 - 마지막 이벤트만 실행하기