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

[자바스크립트] debouncing - 맨 마지막 이벤트만 캐치하기

 

 

 

 

 

 

 

 

 

 

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

이를 막기위해 동일한 이벤트를 묶어서, 맨 마지막에 발생한 이벤트만 실행되게 만드는 기술이다.

 

 

특히 Ajax call 을 동반한 스크롤, 검색창, 버튼클릭 이벤트에 주로 쓰일 수 있겠다. (Ajax 요청을 최소화)

 

 

 

 

 

 

 

 

[사용법]

 

var temp;

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

 

 

 

 

 

 

 

[간단원리]

 

• 이벤트 발생시, 먼저 timeout 이 존재하는지 확인 후, 존재한다면 해당 timeout 을 삭제
• 그 이후 새로운 timeout 을 생성
• timeout 이 실행되지 않고 있는 500ms 동안, event 가 또 발생한다면 직전의 timeout 은 계속 삭제됨
• timeout 내의 코드는 실행되지 않고있다가, 마침내 마지막 이벤트 발생 500ms 후, 실행됨

 

 

 

 

 

간단한 예시를 들면, 

스크롤을 내리고 있는 동안에는 timeout 이 생성/삭제가 반복될 것이고, (timeout 내부의 코드는 실행안된채로)

스크롤을 멈추면, 500ms 후 timeout 내부의 코드가 실행된다.

 

 

 

 

 

 

 

 

 

[적용예시]

 

• 검색창 내 추천검색어 Ajax 요청을 검색어 입력을 마친 후에만 할 수 있도록
• 결제버튼 여러번 클릭 시 한번만 Ajax 요청할 수 있도록 
• 스크롤을 내려 데이터를 새로 불러올 때 마지막 스크롤 위치에서만 Ajax 요청

 

 

 

 

 

 

 

 

 

 

 

 

 

디바운싱은 event 를 제어하는 간단하지만 강력한 기술이다. 

자매품으로는 event 발생시에 interval 을 주어 이벤트를 제어하는 쓰로틀링이 있다.

https://devinserengeti.tistory.com/30

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