디바운싱, 쓰로틀링

쓰로틀링

마지막 함수가 호출된 이후 지정한 시간이 지나기 전에 호출되지 않도록 하는 것.

사용

이번에 포트폴리오 싸이트를 개발할 때 스크롤을 하면 페이지가 스위핑 되도록 하였는데

useEffect(() => {
		const handleWheel = (e) => {
					if (e.wheelDelta < 0) setPage((cur) => (cur < 4 ? cur + 1 : 0));
					if (e.wheelDelta > 0) setPage((cur) => (cur > 0 ? cur - 1 : 4));
			}
		};
		const layoutRefCur = layoutRef.current;
		layoutRefCur.addEventListener('wheel', handleWheel);
	}, []);

이렇게만 스크롤이벤트를 주니 마우스스크롤 한틱마다 handlewheel함수가 호출되어서 화면이 쉭쉭 넘어갔다.

스크롤을 연속적으로 하더라도 텀이 필요했다.

그럴떄 필요한게 쓰로틀링!

useEffect(() => {
		let timer;
		const handleWheel = (e) => {
			if (!timer) {
				timer = setTimeout(() => {
					if (e.wheelDelta < 0) setPage((cur) => (cur < 4 ? cur + 1 : 0));
					if (e.wheelDelta > 0) setPage((cur) => (cur > 0 ? cur - 1 : 4));
					timer = null;
				}, 200);
			}
		};
		const layoutRefCur = layoutRef.current;
		layoutRefCur.addEventListener('wheel', handleWheel);
	}, []);

이렇게하니 원래 의도대로 적절히 화면이 스위핑되었다.

디바운싱

연속적인 함수호출중 마지막 혹은 첫번째 함수가 호출되는 것.

검색창자동완성 같은데서 사용자 입력마다 api를 호출해서 결과를 보여주는데 모든 타자 입력마다 api를 호출하면 부하가 클 것이다.

그래서 디바운싱을 활용

예시

  var debouncer;
	 window.addEventListener('scroll', function (e) {
		 if (debouncer) { clearTimeout(debouncer); } 
		debouncer = setTimeout(function() {
		 console.log('스크롤 이벤트 발생!');
		 const count = document.getElementById('count'); 
		count.innerText = parseInt(count.innerText) + 1 }, 300); 
}) 

타임아웃이 걸려있으면 함수를 호출하지 않는 쓰로틀링과 다르게

타임아웃이 걸려있으면 클리어해주고 다시 함수를 호출해준다.