[번역] 쉽게 설명하는 JavaScript 에서 스로틀링

2023.07.18 — Translate, JavaScript — 7 min read

이 게시물은 원본 아티클인 Throttling in JavaScript Easiest Explanation✨🚀 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 jeetvora331 에게 있습니다.

쓰로틀링(Throttling)이 뭔가요?

쓰로틀링이란 주어진 시간 동안 얼마나 자주 호출될 수 있는지 제한하는 기술 입니다. 이는 애니메이션, 스크롤링, 크기 조정, 데이터 가져오기와 같은 중대하거나 비용이 많이 드는 작업을 트리거 하는 이벤트 리스너가 있는 웹 페이지의 성능과 응답성을 개선하는 데 유용합니다.

예를 들어 만약 사용자가 스크롤 할 때마다 API로 데이터를 가져오는 함수가 있다고 가정하겠습니다. 아마도 사용자 스크롤로 인해 수백개의 요청이 만들어지는 것 보다는, 이를 조절해서 매 초당 한번만 실행시키기를 원할 것입니다. 이렇게 하면 불필요한 요청으로 서버나 브라우저를 과부하로 만들지 않고, 대역폭 소비를 줄일 수있습니다.

JavaScript에서 어떻게 쓰로틀링을 구현하나요?

JavaScript에서 쓰로틀링을 구현하는 방법은 여러가지가 있습니다. 일반적인 방법으로는 setTimeout이나 다른 시간 타이머 메서드로 함수를 감싸 조절합니다. 타이머 함수는 조절되는 함수의 호출 사이에 강제로 딜레이를 만드는데 사용 될 수 있고, 특정 시간에 한번만 실행되도록 합니다.

시각적인 예시

여기 함수가 성공적으로 실행되면, 클릭을 차단하는 블로킹 딜레이 타이머가 시작되는 함수가 있습니다. 딜레이가 만료되면 클릭을 허용하고 함수를 실행합니다.

setTimeout을 사용해 스로틀 함수를 만드는 예시입니다.

function throttle(mainFunction, delay) {
	let timerFlag = null;

	return (...args) => {
		if (timerFlag === null) {
			mainFunction(...args);
			timerFlag = setTimeout(() => {
				timerFlag = null;
			}, delay);
		}
	};
}

사용 예시

function fetchData() {
	console.log('데이터 가져오는중...');
	setTimeout(() => {
		console.log('데이터 가져오기 완료!');
	}, Math.random() * 1000);
}

const throttledFetchData = throttle(fetchData, 5000);

window.addEventListener('scroll', throttledFetchData);

이 예시에서 우리는 callback과 딜레이를 매개변수로 받는 throttle함수를 정의했습니다. throttle 함수는 callback을 setTimeout 으로 생성한 타이머 로직으로 감싼 새로운 함수를 반환합니다. 타이머는 콜백이 delay 기간 안에 오직 한번만 호출 될 것을 보장합니다. 만약 타이머가 만료되기 전에 반환된 함수가 다시 호출된다면, 아무것도 하지 않습니다.

그런 다음 무작위로 딜레이되는 API 호출 모방 함수 fetchData를 정의했습니다. throttle 함수를 사용해 5000ms 의 딜레이를 가진 throttledFetchData 함수를 만듭니다. 그리고 윈도우 스크롤 이벤트에 이벤트 리스너를 추가하여 throttledFetchData 함수가 호출되도록 합니다.

왜 쓰로틀링을 사용하나요?

쓰로틀링은 웹페이지에서 불필요한 명령을 감소시켜 성능과 사용자 경험을 개선시킵니다. 또한 이는 아래와 같은 몇몇 이슈들을 예방할 수 있습니다.

서버나 브라우저에 너무 많은 요청이나 계산으로 인한 과부화
API나 서비스의 요청 제한이나 할당량 초과
사용자에게 관련없거나 보이지 않는 작업에 대해 낭비되는 대역폭 또는 자원
구리거나 렉걸리는 애니메이션 또는 인터렉션

기술적이지 않은 쓰로틀링 예제

선풍기의 풍속 변경

선풍기의 풍속을 변경할 때 원하는 속도에 도달할 때 까지 몇 초의 시간이 걸립니다. 따라서 다시 속도를 변경하기 전에, 선풍기가 안정적인 상태에 도달할 때 까지 몇 초 동안 기다려야 합니다.

언제 쓰로틀링을 사용하나요?

쓰로틀링은 함수가 얼마나 자주 호출될 수 있는지 제한하고 싶지만, 어떤 호출도 놓치고 싶지 않은 상황일 때 적합합니다. 예를 들어, 아마 아래와 같은 상황에서 사용하고 싶을 것입니다.

사용자 스크롤, 리사이즈 또는 타이핑 할 때 API 또는 데이터베이스로부터 데이터를 가져오고 싶을 때
사용자 스크롤, 리사이즈 또는 마우스를 움직일 때 요소를 업데이트하거나 애니메이션을 주고 싶을 때
자주 발생하는 사용자 행동이나 이벤트를 기록하고 추적하고 싶을 때

결론

쓰로틀링은 일정 기간 동안 함수가 얼마나 자주 호출될 수 있는지 제한하는 기술입니다. 이는 무겁거나 비용이 많이 드는 이벤트 리스너를 가지고 있는 웹 페이지에서, 성능이나 반응성을 개선시키는 데 유용합니다. JavaScript에서는 setTimeout이나 setInterval 같은 타이머 함수를 사용해서 스로틀링을 구현할 수 있습니다. 스로틀링은 함수가 얼마나 자주 호출 될 수 있는지 제한하면서 어떤 요청도 놓치고 싶지 않은 경우에 적합하게 사용됩니다.

이 블로그 내용이 JavaScript에서 스로틀링에 대해 배우는 데 도움이 되었으면 좋겠습니다. JavaScript 에서 디바운싱(Debouncing) 게시글 도 볼 수 있습니다.