두근두근 debounce
카테고리 없음lodash란 유용한 기능을 여럿 제공해 주는 훌륭한 라이브러리다.
그 중에서 자주 쓰게 될 _.debounce와 _.throttle에 대해 알아보고자 한다.
_.debounce(func, [wait=0], [options={}])
wait 초 뒤에 func를 실행한다. 같은 함수를 지나치게 자주 부르고 싶지 않을 때 (ex: 화면 크기 조정 등) 사용한다.
_.throttle(func, [wait=0], [options={}])
wait초 뒤에 func를 실행한다. 같은 함수를 지나치게 자주 부르고 싶지 않을 때 (ex: 화면 크기 조정 등) 사용한다.
Q. 똑같은 거 아닌가요?
우선 debounce의 작동 원리부터 살펴보자.
이렇게, 여러 개의 이벤트를 묶어 하나의 이벤트로 처리한다. 만약 이벤트가 종료된 이후 debounce 이벤트가 발생하는 게 마음에 들지 않는다면, leading
옵션을 사용할 수 있다.
var drawDebouncedEvent = _.debounce(function(div){
debounceColor = globalColor;
}, frequency*4, {leading:true, trailing:false});
throttle의 경우 이와 조금 다르다. throttle은 일정 주기마다 무조건 실행된다.
예를 들어 사용자가 30초 동안 화면 크기를 조정할 경우, debounce는 화면 크기 조정이 모두 끝났을 때(leading을 사용할 경우 시작할 때) 1회만 실행될 가능성이 높다. 그러나 throttle은 일정 주기마다 무조건적으로 함수를 실행시켜, 즉각 반응할 수 있다.
$(document).on('scroll', _.throttle(function(){
check_if_needs_more_content();
}, 300));