## 为什么 JavaScript 节流函数有时会在节流时间过后再次触发？

JavaScript 节流函数

简介

JavaScript 节流是一种有用的技术，可以防止函数执行过于频繁。这在过多的函数调用可能导致性能问题或意外影响的情况下特别有用。

自定义节流函数

以下 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中文网其他相关文章！