## JavaScript 제한 기능이 때때로 제한 시간이 경과한 후에 다시 한 번 실행되는 이유는 무엇입니까?

JavaScript Throttle 기능

소개

JavaScript Throttle은 함수가 너무 자주 실행되는 것을 방지할 수 있는 유용한 기술입니다. 이는 과도한 함수 호출이 성능 문제나 의도하지 않은 효과를 일으킬 수 있는 상황에서 특히 유용할 수 있습니다.

사용자 정의 스로틀 기능

다음 JavaScript 코드는 재사용 가능한 "스로틀" 기능을 제공합니다.

<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 &amp;&amp; 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);
    }
  };
}

개량된 스로틀링 기능

그러나 제공되는 기능에는 눈에 띄는 단점이 있습니다. 스로틀 시간이 경과한 후 함수가 한 번 더 실행됩니다. 이는 특정 시나리오에서 바람직하지 않은 동작으로 이어질 수 있습니다.

조절 기능의 수정된 버전은 underscore.js 및 lodash와 같은 라이브러리에서 사용할 수 있습니다. 이 버전은 스로틀 시간 이후에 기능을 실행하는 문제를 효과적으로 해결합니다.

<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 &amp;&amp; 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 &amp;&amp; options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};</code>

간소한 스로틀 기능

간소하고 구성할 수 없는 스로틀 기능 버전이 아래에 제공됩니다.

<code class="javascript">function throttle (callback, limit) {
    var waiting = false;                      // Initially, we're not waiting
    return function () {                      // We return a throttled function
        if (!waiting) {                       // If we're not waiting
            callback.apply(this, arguments);  // Execute users function
            waiting = true;                   // Prevent future invocations
            setTimeout(function () {          // After a period of time
                waiting = false;              // And allow future invocations
            }, limit);
        }
    }
}</code>

이 기능을 사용하면 "limit" 매개변수를 조정하여 함수 실행 빈도를 제어할 수 있습니다.

위 내용은 ## JavaScript 제한 기능이 때때로 제한 시간이 경과한 후에 다시 한 번 실행되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!