js中的简单节流阀

小编典典

js中的简单节流阀

javascript

我正在寻找JS中的简单节流阀。我知道像lodash和underscore这样的库都有它，但是仅对一个函数来说，包含其中任何一个库都是过大的。

我也在检查jquery是否具有类似的功能-找不到。

我发现一个工作的节流阀，这是代码：

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

问题是：在油门时间结束后，它将再次触发该功能。因此，假设我制作了一个在按键时每10秒触发一次的油门如果我按键2次，则在完成10秒后仍会触发第二次按键。我不要这种行为。

阅读 1892

2020-05-01

共1个答案

小编典典

我将使用underscore.js或lodash源代码找到该功能的经过良好测试的版本。

这是下划线代码的略微修改版本，用于删除所有对underscore.js的引用：

// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.
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;
  };
};

请注意，如果您不需要强调支持的所有选项，则可以简化此代码。

编辑1：删除了对下划线的另一个引用，即对Zettam的评论

编辑2：在lollzery wowzery的评论中添加了有关lodash和可能的代码简化的建议

2020-05-01