🤔쓰로틀링이란?
전자기기에서 말하는 쓰로틀링은 모종의 이유로 자동으로 성능을 낮추거나 전원을 차단하는등의 기능을 말함.
- 디바이스(피씨,노트북,스마트폰)에서 발열이 심하면 고의로 성능을 낮춰서 기기와 베터리의 성능을 보호해주는 주는 개념.
- 프론트앤드에서는 지속적으로 발생하는 이벤트 대한 제한을 두는 개발 기법을 말한다. 예를 들어, 스크롤을 할때마다 엄청난 이벤트가 발생하는데, 이벤트 내용이 호출건수에 제한이 있는 API를 불러온다면, 오래 써보지도 못하고 제한 건수가 초과 될것이다. 그래서 보통 스크롤 이벤트는 몇초에 한번씩 이벤트를 호출하게 처리를 한다.
😎소스
😑기본적인 스크롤 이벤트 소스
document.addEventListener('scroll', ()=>{
console.log('스크롤 이벤트 시작.');
})
- 스크롤을 할때마다 console을 출력하는 소스코드다. 로그 출력부터 보면 스크롤을 많이 안했을뿐인데 벌써 65건의 콘솔이 출력된다.
😄쓰로틀링이 구현된 소스
let timer;
document.addEventListener('scroll',e=>{
if(!timer){
timer = setTimeout(()=>{
console.log('스크롤 이벤트 시작.');
timer = null;
},1000);
}
})
Throttling기법으로 재구현 한 소스다. 같은 스크롤을 수행시, 4번의 콘솔 출력 결과가 나왔다.
- 해당 소스는 1초 후에 콘솔 출력과 타이머 ID값을 가진
timer변수를null처리하는 타이머를 생성한다.- 만약 이벤트가 수행되고있는 찰나에 이벤트가 발생하면 타이머의 고유 ID를 가지고 있는
timer변수에 값이 있기때문에, 이벤트가 발생해도 안에 내용은 수행되지않는다.- 만약에 1초가 지난후에 스크롤 이벤트가 다시 발생하면,
setTimeout함수의 콜백내용이 실행이 된다.
🤩 클로저 + 쓰로틀링을 이용해 구현한 소스
쓰로틀링을 모듈처럼 활용하기 위해 클로저를 활용해서 구현해보자.
//...생략
const throtlling = (callback,time=1000,...args)=>{
let timer;
return ()=>{
if(!timer){
timer = setTimeout()=>{
callback(...args);
timer = null;
},time)
}
}
}
const callbackFunc = ()=>console.log('스크롤 이벤트 시작.');
document.addEventListener('scroll',throtlling(()=>callbackFunc()));
throtlling함수는 콜백함수와 delay될 시간을 받는 함수다.time변수값은 사용자가 넣지않는다면 기본적으로 1초다.timer는 외부에서 접근못하게 리턴하려는 함수 상단 scope에 선언 한다.- 리턴하는 함수객체에서
...args(리턴함수에서 정하지않는 매개변수 외에 나머지 매개변수 배열을 비구조화 할당된 배열 값들을 가리킴)을 담은callback함수를 호출한다.
