JavaScript에서 스로틀링이란 무엇입니까?
앱의 성능을 향상시키기 위해 불필요한 함수 호출을 방지하기 위해 사용하는 단순한 기술에 지나지 않습니다.
와 달리 여기에서는 최근에 실행된 경우 특정 시간 동안 함수 호출을 차단합니다. 또는 스로틀링이 고정된 속도로 정기적으로 함수 호출을 보장한다고 말할 수도 있습니다.
아래 예시를 보자면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Throttling</title>
</head>
<body>
<button class="btn">Click here</button>
<script src="index.js"></script>
</body>
</html>
let count = 0;
function submitData(query){
// some api call
console.log("result",count++)
}
document.querySelector(".btn").addEventListener("click",()=>{
submitData();
})
위의 예에서 2000ms에 10번 클릭하면 위의 예에서 명확하게 볼 수 있듯이 Function이 10번 호출됩니다.
매우 비용이 많이 드는 작업이며 개발자로서 우리의 임무는 작업을 가능한 한 저렴하게 만드는 것입니다.
스로틀링이 이러한 작업을 더 저렴하게 만드는 데 어떻게 도움이 되는지 살펴보겠습니다.
function throttle(fn,delay){
let last = 0;
/*
here ...args is optional I've used this in case, if you
want to pass some parameters you can use ...args
*/
return (...args)=>{
const now = new Date().getTime();
if(now - last < delay){
return;
}
last = now;
return fn(...args)
}
}
const magicFunction = throttle(submitData,1000);
let count = 0;
function submitData(){
// some api call
console.log("result",count++)
}
document.querySelector(".btn").addEventListener("click",magicFunction);
이제 2000ms에 10번 클릭하면 코드에서 볼 수 있듯이 Function이 2번만 호출됩니다. 1000ms 동안 함수 호출을 차단했습니다.
이것이 앱의 성능을 향상시키기 위해 스로틀링 기술을 구현하는 방법입니다.
더 많은 블로그 게시물을 보려면 나를 따르십시오.
이 블로그가 도움이 되었는지 알려주세요.
||
Reference
이 문제에 관하여(JavaScript에서 스로틀링이란 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aamchora/what-is-throttling-in-javascript-2e9p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
