디바운스와 쓰로틀

단시간에 많은 양의 이벤트가 발생하면 해당 이벤트핸들러가 너무 많이 실행되서 성능상의 문제가 발생할 수 있다.

디바운스와 쓰로틀을 활용해 이러한 문제를 해결할 수 있다.

 

디바운스

단기간에 많은 양의 이벤트가 발생할 때 마지막 이벤트에서만 (사용자 조작이 끝났을 때) 콜백 함수를 실행시킨다.

let timer
document.addEventListener('scroll', () => {
	if(timer) clearTimeout(timer)
    timer = setTimeout(() => {
    	console.log('마지막에만 실행!)
    },400)
})

 

활용

사용자가 회원가입 할 때 아이디 중복체크를 자동적으로 해주는 경우가 있다. 사용자가 입력할 때 input에 change 콜백을 줘서 서버에 중복체크 요청을 하고, 결과를 입력 창 밑에 보여준다. (ex: 사용할 수 있는 아이디입니다.)

이 때 중복체크는 사용자가 입력하는 와중에는 할 필요가 없다. 사용자 입력이 끝났을 때만 해주면 된다. 이럴 때 디바운스를 적용해주면 서버에 적은 요청(적은 부하)를 주게 된다.

 

쓰로틀

단기간에 많은 양의 이벤트가 발생할 때 주기적으로 이벤트에 묶인 콜백을 실행한다.

let timer
document.addEventListener('scroll', ()=>{
	if(!timer) {
    	timer = setTimeout(()=>{
        	console.log('주기적으로 실행!')
            timer = null
        },200)
    }
})

 

활용

포토샵과 같은 편집기의 경우 <input type="slider"/> 를 활용해서 사용자가 막대기를 드래그해서 배경의 채도,명도 같은 부분을 조정한다. 조정할 때 값이 변경될 때마다 change 이벤트가 발생한다. 매번 배경의 채도를 변경하는 것은 작업이 너무 많기 때문에 이런 경우에 쓰로틀을 활용하면 사용자에게는 실시간으로 변경하는 것처럼 보이면서, 함수 실행은 훨씬 줄일 수 있다.