[JavaScript] 스로틀(Throttle ) & 디바운스(Debounce)

이번엔 오랜만에 자바스크립트에 관련 된 개념을 가져왔다 ;D
Debound와 Throttle이라는 친구들이다.

마켓팅 부서에서 사용자들이 페이지 스크롤을 얼마나 내려보는지 알고싶다해서
scroll event를 추가하던중에 만나게됐다.🖐

.

.

.

[ Throttle ]

Throttle을 검색해보니 뜻은 "조절판"이라고 되어있었다.
역시 이름을 참 잘 짓는 것 같다 :D
Throttle은 이벤트를 일정 주기마다 발생하도록 만들어주는 친구다.

위에서 적었다 시피 난 스크롤 이벤트를 발생 시켜야했는데
window에 scroll 이벤트를 추가하니
스크롤 할 때 마다 이벤트가 발생하게 되면서
엄청난 양의 이벤트가 만들어 졌다.

 

이럴때 throttle을 사용하게 되면
일정시간 마다 스크롤이 발생하게 되니 부하가 덜하게 된다.

아래는 스크롤 이벤트를 1초마다 실행되도록 한 코드이다 :)

$(window).on("scroll", $.throttle(1000, function(){
	
	// 1s scroll event
}));

.

.

.

[ Debounce ]

Debounce는 이벤트를 묶어주는 느낌으로
마지막에 실행되는 이벤트만을 실행 시켜주는 친구다.

보통 resize 이벤트를 걸 때 사용했었다.
브라우저 창 크기를 조절 하고 있을 때 
내가 최종적으로 알고 싶은건 변경된 브라우저 사이즈이니
중간에 resize 이벤트가 굳이 필요없다.

이럴 경우 Debounce를 이용해 마지막에만 실행 시켜주면
훨씬 좋은 코드가 된다 :)

$(window).on("resize", $.debounce(1000, function(){
	
    // 1s resize event
}));

그럼 오랜만의 자바스크립트 친구는 여기서 소개 끝!