JavaScript의 Simple Throttling
JavaScript에서 Throttling은 함수 실행을 특정 시간 간격으로 제한하는 기술입니다. 이는 과도한 함수 호출로 시스템이 과부하되는 것을 피하고 싶을 때 유용합니다.
기존 스로틀 구현
lodash 및 underscore와 같은 라이브러리는 내장 스로틀 기능을 제공합니다. 그러나 간단한 작업을 위해 이러한 전체 라이브러리를 포함하는 것은 중복될 수 있습니다.
사용자 정의 스로틀 기능
다음은 독립 실행형 솔루션으로 사용할 수 있는 사용자 정의 스로틀 기능입니다.
<code class="javascript">function throttle(fn, threshhold, scope) { threshhold || (threshhold = 250); var last, deferTimer; return function () { var context = scope || this; var now = +new Date, args = arguments; if (last && now < last + threshhold) { // hold on to it clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fn.apply(context, args); }, threshhold); } else { last = now; fn.apply(context, args); } }; }
개선: 중복 실행 방지
그러나 제공된 코드에서는 스로틀 간격이 지나면 함수가 다시 실행될 수 있는 문제가 있습니다. 이 문제를 해결하기 위해 다음과 같이 기능을 수정할 수 있습니다.
<code class="javascript">function throttle(fn, threshhold, scope) { threshhold || (threshhold = 250); var last, deferTimer; return function () { var context = scope || this; var now = +new Date; if (now < last + threshhold) { return; // prevent subsequent execution } last = now; fn.apply(context, arguments); }; }
고급 스로틀 기능
더 많은 유연성과 추가 옵션을 위해 다음 구현을 참조할 수 있습니다. :
<code class="javascript">function throttle(func, wait, options) { var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : Date.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = Date.now(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; };</code>
위 내용은 다음은 귀하의 기사 내용에 맞는 몇 가지 질문 기반 제목입니다. * **JavaScript에서 단순 제한을 어떻게 구현할 수 있나요?** * **JavaScript 함수를 제한하는 가장 좋은 방법은 무엇입니까?** *의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!