[Javascript] 쓰로틀링(throttle), 디바운싱(debounce)을 헷갈리지 말자!

프론트엔드 개발을 하다 보면 정말 많이 들어본 개념일 것입니다.

무의미하게 무수하게 발생하는 이벤트를 막기 위한 기법들입니다.

타이머 함수, setTimeout을 통해서 간단하게 구현할 수 있습니다.

 

 

쓰로틀링(Throttle)

throttle은 영어로 조르다, 목을 조르다라는 의미를 가지고 있습니다.

이벤트의 목을 조른다(?)라고 볼 수 있는데요.

이벤트가 무수하게 발생하더라도, 일정 시간 동안 이벤트가 1번만 발생하도록 처리하는 것을 의미합니다.

스크롤 이벤트에 쓰로틀링을 적용해서 이벤트 최적화를 해볼 수 있는데요.
스크롤을 할 때 최적화하지 않으면, 이벤트가 무수히 많이 발생하기 때문입니다.

 

 

한 개의 버튼이 있고, 이 버튼을 누르면 로그인 기능이 동작한다고 가정해볼까요?

클릭방지를 하지 않는다면 유저가 버튼을 계속 클릭했을 때, 로그인 로직이 작동할 것입니다.

이 로직이 API를 호출하거나 상태값을 변경하거나 하면 골치아픈 문제가 될 수 있습니다.

 

 

쓰로틀링을 이용해서, 1초에 한번의 이벤트만 실행되도록 해봅시다.

 

 

 

// throttle.js

let timer = 0;

const handleLogin = () => {
	console.log('클릭!');
    
	if (timer) {
    	return;
    }
    
    timer = setTimeout(() => {
	   console.log('로그인!');
       timer = 0;
    }, 1000);
}

handleLogin 함수가 어떤 버튼에 클릭 이벤트로 등록이 되었다고 합시다.

위의 코드는 버튼을 계속 클릭하더라도, 1초동안 단 한번의 로그인! 로그를 남기고 있습니다.

 

 

 

 

https://playcode.io/react

 

눈으로 비교하기 쉽게 클릭과 로그인 로그를 남기도록 했습니다.

 

 

 

 

 

디바운싱(Debounce)

이벤트가 무수히 발생하더라도 마지막 이벤트를 기준으로 일정 시간이 지나면 이벤트를 1번만 발생시키는 기법입니다.

마지막 이벤트까지의 이벤트들을 하나의 그룹으로 생각해서, 한 개의 이벤트를 발생시키는 것입니다.

다른 말로 말하면, 일정한 시간이 지나기 전에 이벤트가 계속 발생하면 이벤트를 막아버립니다.

 

 

// debounce.js

let timer = 0;

const handleLogin = () => {
	console.log('클릭!');
    
    clearTimeout(timer);
    
    timer = setTimeout(() => {
	   console.log('로그인!');
    }, 1000);
}

 

 

https://playcode.io/react