외부 라이브러리 없이 JavaScript에서 간단한 스로틀 기능을 구현하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-10-25 06:41:02
원래의
942명이 탐색했습니다.

How to Implement a Simple Throttle Function in JavaScript without External Libraries?

외부 라이브러리가 없는 JavaScript의 Simple Throttle

소개

JavaScript에서 Throttling은 속도를 제한하는 데 사용되는 기술입니다. 함수를 실행할 수 있는 곳입니다.

커스텀 스로틀 기능

제공되는 커스텀 스로틀 기능은 기능적이긴 하지만 스로틀 시간이 지나면 다시 한 번 해당 기능을 실행한다는 단점이 있습니다. 개선된 버전은 다음과 같습니다.

<code class="js">function throttle(fn, wait, options) {
  if (!options) options = {};
  var context,
    args,
    result,
    timeout = null,
    previous = 0;
  var later = function () {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = fn.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 = fn.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
}</code>
로그인 후 복사

이 버전은 앞쪽 및 뒤쪽 가장자리 동작에 대한 사용자 정의 가능한 옵션을 구현하여 스로틀 기간 이후 다중 트리거 문제를 해결합니다.

간소화된 스로틀 기능

고급 옵션이 필요하지 않은 경우 구성할 수 없는 단순화된 스로틀 기능을 사용할 수 있습니다.

<code class="js">function throttle(callback, limit) {
  var waiting = false;
  return function () {
    if (!waiting) {
      callback.apply(this, arguments);
      waiting = true;
      setTimeout(function () {
        waiting = false;
      }, limit);
    }
  };
}</code>
로그인 후 복사

위 내용은 외부 라이브러리 없이 JavaScript에서 간단한 스로틀 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!