JavaScript中的简单节流

Question

我正在寻找一个简单的JavaScript节流阀。我知道像lodash和下划线这样的库都有它，但只有一个函数包含这些库中的任何一个都是多余的。

我还检查了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秒完成时，它仍然会按下第二个键盘。我不希望这种行为。

Answer 1

除了这里的讨论（以及最近的访问者），如果不使用lodash中几乎事实上的throttle的原因是为了有一个更小的包或捆绑包，那么可以只在捆绑包中包含throttle，而不是整个lodash库。例如，在ES6中，它类似于：

import throttle from 'lodash/throttle';

此外，还有一个名为lodash的throttle仅来自lodash的包。节气门可与ES6中的简单导入或ES5中的require一起使用。

Answer 2

这个怎么样？

function throttle(func, timeFrame) {
  var lastTime = 0;
  return function () {
      var now = new Date();
      if (now - lastTime >= timeFrame) {
          func();
          lastTime = now;
      }
  };
}

易于理解的

你可能有兴趣看看来源。

Answer 3

我会用下划线。js或lodash源代码，以找到此函数经过良好测试的版本。

下面是下划线代码的稍微修改版本，用于删除对下划线的所有引用。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;
  };
};

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

请在下面找到此功能的一个非常简单且不可配置的版本：

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

编辑1：删除了对下划线的另一个引用，thx指向@Zettam的注释

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

编辑3：由于流行的请求，我添加了一个非常简单的、不可配置的函数版本，改编自@vsync的注释