**为什么简单的JavaScript节流函数会消除节流期后的最终执行？**-js教程-PHP中文网

**为什么简单的JavaScript节流函数会消除节流期后的最终执行？**

DDD

发布： 2024-10-27 00:41:30

原创

593 人浏览过

**Why does the Simple JavaScript Throttle Function Eliminate the Final Execution After the Throttle Period?**

JavaScript 中的简单节流

JavaScript 提供了各种用于节流功能的工具，包括 lodash 和 underscore。然而，对于这些库可能过多的情况，自定义节流实现是可取的。

现有节流功能和挑战

提供的节流功能是功能性的，但是它提出了一个问题。节流期结束后，它最后一次执行该函数。在该函数不应多次触发的情况下，这可能会导致出现不需要的行为。

改进的节流函数

要解决此问题，请考虑以下增强的节流函数：消除节流周期后的最终执行：

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;
  };
};

登录后复制

此更新的函数提供了一个可配置的节流机制，带有用于前沿和后沿触发的可选参数。

简化的节流功能

如果不需要可定制性，更简单的节流函数如下：

function throttle (callback, limit) {
    var waiting = false; 
    return function () { 
        if (!waiting) { 
            callback.apply(this, arguments); 
            waiting = true; 
            setTimeout(function () { 
                waiting = false; 
            }, limit);
        }
    }
}

登录后复制

这个不可配置的函数将目标函数节流到指定的时间间隔，而不需要复杂的选项.

以上是**为什么简单的JavaScript节流函数会消除节流期后的最终执行？**的详细内容。更多信息请关注PHP中文网其他相关文章！