js中的简单节流阀

我正在寻找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秒后仍会触发第二次按键。我不要这种行为。

我将使用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;
  };
};

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

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

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：删除了对下划线的另一个引用，即@Zettam的注释

编辑2：添加了有关lodash和可能的代码简化的建议，例如@lolzery @wowzery的注释

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

callback：采用应调用的函数

limit：在该时间限制内应调用该函数的次数

时间：重置限制计数的时间跨度

功能和用法：假设您有一个API，允许用户在1分钟内调用10次

function throttling(callback, limit, time) {
    /// monitor the count
    var calledCount = 0;

    /// refresh the `calledCount` varialbe after the `time` has been passed
    setInterval(function(){ calledCount = 0 }, time);

    /// creating a closure that will be called
    return function(){
        /// checking the limit (if limit is exceeded then do not call the passed function
        if (limit > calledCount) {
            /// increase the count
            calledCount++;
            callback(); /// call the function
        } 
        else console.log('not calling because the limit has exceeded');
    };
}
    
//////////////////////////////////////////////////////////// 
// how to use

/// creating a function to pass in the throttling function 
function cb(){
    console.log("called");
}

/// calling the closure function in every 100 milliseconds
setInterval(throttling(cb, 3, 1000), 100);

那这个呢？

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

简单。

您可能有兴趣查看源代码。

添加到这里的讨论（以及更近的游客），如果不使用的原因，几乎实际上throttle从lodash是有一个小尺寸的包或捆绑，则有可能只包括throttle在你的包，而不是整个lodash库。例如在ES6中，它将类似于：

import throttle from 'lodash/throttle';

此外，还有一个throttle只能从封装lodash称为lodash.throttle其可以用简单的使用import在ES6或require在ES5。

我只需要一个用于窗口大小调整事件的油门/反跳功能，并且很好奇，我还想知道它们是什么以及它们如何工作。

我已经阅读了多篇关于SO的博客文章和QA，但它们似乎都使这一过程变得过于复杂，建议使用库，或者只是提供了说明，而不是简单的普通JS实现。

由于内容丰富，因此我将不提供描述。所以这是我的实现：

function throttle(callback, delay) {
    var timeoutHandler = null;
    return function () {
        if (timeoutHandler == null) {
            timeoutHandler = setTimeout(function () {
                callback();
                clearInterval(timeoutHandler);
                timeoutHandler = null;
            }, delay);
        }
    }
}

function debounce(callback, delay) {
    var timeoutHandler = null;
    return function () {
        clearTimeout(timeoutHandler);
        timeoutHandler = setTimeout(function () {
            callback();
        }, delay);
    }
}

这些可能需要调整（例如，最初不立即调用回调）。

查看操作上的差异（尝试调整窗口大小）：

function throttle(callback, delay) {
    var timeoutHandler = null;
    return function () {
        if (timeoutHandler == null) {
            timeoutHandler = setTimeout(function () {
                callback();
                clearInterval(timeoutHandler);
                timeoutHandler = null;
            }, delay);
        }
    }
}

function debounce(callback, delay) {
    var timeoutHandler = null;
    return function () {
        clearTimeout(timeoutHandler);
        timeoutHandler = setTimeout(function () {
            callback();
        }, delay);
    }
}

var cellDefault  = document.querySelector("#cellDefault div");
var cellThrottle = document.querySelector("#cellThrottle div");
var cellDebounce = document.querySelector("#cellDebounce div");

window.addEventListener("resize", function () {
    var span = document.createElement("span");
    span.innerText = window.innerWidth;
    cellDefault.appendChild(span);
    cellDefault.scrollTop = cellDefault.scrollHeight;
});

window.addEventListener("resize", throttle(function () {
    var span = document.createElement("span");
    span.innerText = window.innerWidth;
    cellThrottle.appendChild(span);
    cellThrottle.scrollTop = cellThrottle.scrollHeight;
}, 500));

window.addEventListener("resize", debounce(function () {
    var span = document.createElement("span");
    span.innerText = window.innerWidth;
    cellDebounce.appendChild(span);
    cellDebounce.scrollTop = cellDebounce.scrollHeight;
}, 500));

table {
    border-collapse: collapse;
    margin: 10px;
}
table td {
    border: 1px solid silver;
    padding: 5px;
}
table tr:last-child td div {
    width: 60px;
    height: 200px;
    overflow: auto;
}
table tr:last-child td span {
    display: block;
}

<table>
    <tr>
        <td>default</td>
        <td>throttle</td>
        <td>debounce</td>
    </tr>
    <tr>
        <td id="cellDefault">
            <div></div>
        </td>
        <td id="cellThrottle">
            <div></div>
        </td>
        <td id="cellDebounce">
            <div></div>
        </td>
    </tr>
</table>

JSFiddle

这是我在9LOC的ES6中实现油门功能的方式，希望对您有所帮助

function throttle(func, delay) {
  let timeout = null
  return function(...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.call(this, ...args)
        timeout = null
      }, delay)
    }
  }
}

单击此链接以查看其工作方式。

我制作了一个具有一些限制功能的npm软件包：

npm install function-throtler

节流和队列

返回最多每个W毫秒调用的函数版本，其中W等待。对函数的调用比W排队的频率要高得多，每W ms排队调用一次

节制更新

返回最多每个W毫秒调用的函数版本，其中W等待。对于比W多发生的呼叫，最后一次呼叫将是被呼叫的呼叫（最后优先）

风门

限制您的函数最多每W毫秒调用一次，其中W等待。通过W的呼叫被丢弃

有一个适合此目的的库，它是Ember的Backburner.js。

https://github.com/BackburnerJS/

您会这​​样使用。

var backburner = new Backburner(["task"]); //You need a name for your tasks

function saySomething(words) {
  backburner.throttle("task", console.log.bind(console, words)
  }, 1000);
}


function mainTask() {
  "This will be said with a throttle of 1 second per word!".split(' ').map(saySomething);
}

backburner.run(mainTask)

该节流功能基于ES6。回调函数接受参数（args），但仍与节流函数一起包装。可以根据您的应用需求自由定制延迟时间。每100ms 1次用于开发模式，事件“ oninput”仅是其频繁使用的一个示例：

const callback = (...args) => {
  console.count('callback throttled with arguments:', args);
};

throttle = (callback, limit) => {
  let timeoutHandler = 'null'

  return (...args) => {
    if (timeoutHandler === 'null') {
      timeoutHandler = setTimeout(() => {            
        callback(...args)
        timeoutHandler = 'null'
      }, limit)
    }
  }
}

window.addEventListener('oninput', throttle(callback, 100));

PS如@Anshul所解释：节流强制函数在一段时间内可以被调用的最大次数。如“每100毫秒最多执行一次此功能”。

在下面的示例中，尝试多次单击该按钮，但是该myFunc功能仅在3秒钟内执行一次。该函数throttle与要执行的函数和延迟一起传递。它返回一个闭包，存储在中obj.throttleFunc。现在，由于obj.throttleFunc存储了一个闭包，因此isRunning将在其中保留其值。

function throttle(func, delay) {
  let isRunning;
  return function(...args) {
    let context = this;        // store the context of the object that owns this function
    if(!isRunning) {
      isRunning = true;
      func.apply(context,args) // execute the function with the context of the object that owns it
      setTimeout(function() {
        isRunning = false;
      }, delay);
    }
  }
}

function myFunc(param) {
  console.log(`Called ${this.name} at ${param}th second`);
}

let obj = {
  name: "THROTTLED FUNCTION ",
  throttleFunc: throttle(myFunc, 3000)
}

function handleClick() {
  obj.throttleFunc(new Date().getSeconds());
}

button {
  width: 100px;
  height: 50px;
  font-size: 20px;
}

    <button onclick="handleClick()">Click me</button>

如果我们不希望传递上下文或参数，则其更简单的版本如下：

function throttle(func, delay) {
  let isRunning;
  return function() {
    if(!isRunning) {
      isRunning = true;
      func()
      setTimeout(function() {
        isRunning = false;
      }, delay);
    }
  }
}

function myFunc() {
  console.log('Called');
}


let throttleFunc = throttle(myFunc, 3000);

function handleClick() {
  throttleFunc();
}

button {
  width: 100px;
  height: 50px;
  font-size: 20px;
}

<button onclick="handleClick()">Click me</button>

function throttle(targetFunc, delay){
  let lastFunc;
  let lastTime;

  return function(){
    const _this = this;
    const args = arguments;

    if(!lastTime){
      targetFunc.apply(_this, args);
      lastTime = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function(){
        targetFunc.apply(_this, args);
        lastTime = Date.now();
      }, delay - (Date.now() - lastTime));
    }
  }
}

试试看 ：

window.addEventListener('resize', throttle(function() {
  console.log('resize!!');
}, 200));

下面是我能想到的最简单的节气门，它处于13 LOC。每次调用该函数都会创建一个超时，并取消旧的超时。如预期的那样，使用适当的上下文和参数调用原始函数。

function throttle(fn, delay) {
  var timeout = null;

  return function throttledFn() {
    window.clearTimeout(timeout);
    var ctx = this;
    var args = Array.prototype.slice.call(arguments);

    timeout = window.setTimeout(function callThrottledFn() {
      fn.apply(ctx, args);
    }, delay);
  }
}

// try it out!
window.addEventListener('resize', throttle(function() {
  console.log('resize!!');
}, 200));

这是我自己的Vikas发布版本：

throttle: function (callback, limit, time) {
    var calledCount = 0;
    var timeout = null;

    return function () {
        if (limit > calledCount) {
            calledCount++;
            callback(); 
        }
        if (!timeout) {
            timeout = setTimeout(function () {
                calledCount = 0
                timeout = null;
            }, time);
        }
    };
}

我发现使用setInterval不是一个好主意。

我还想提出一个简单的解决方案，以解决只有一个您知道要调用的函数的情况（例如：搜索）

这是我在项目中所做的

let throttle;

function search() {
    if (throttle) {
      clearTimeout(throttle);
    }
    throttle = setTimeout(() => {
      sendSearchReq(str)
    }, 500);
  }

在输入更改事件上调用搜索

简单的油门功能-

注意-继续单击按钮，您将在第一次单击时看到控制台日志，然后每隔5秒钟才看到控制台日志，直到您继续单击为止。

HTML-

<button id='myid'>Click me</button>

Javascript-

const throttle = (fn, delay) => {
  let lastTime = 0;
  return (...args) => {
      const currentTime = new Date().getTime();
      if((currentTime - lastTime) < delay) {
        return;
      };
      lastTime = currentTime;
      return fn(...args);
  }
};

document.getElementById('myid').addEventListener('click', throttle((e) => {
  console.log('I am clicked');
}, 5000));

我们还可以使用标志实现

var expensive = function(){
    console.log("expensive functionnns");
}

window.addEventListener("resize", throttle(expensive, 500))

function throttle(expensiveFun, limit){
    let flag = true;
    return function(){
        let context = this;
        let args = arguments;
        if(flag){
            expensiveFun.apply(context, args);
            flag = false;
            setTimeout(function(){
                flag = true;
            }, limit);
        }
    }
}

我在这里看到了很多答案，这些答案对于“一个简单的js节气门”来说太复杂了。

几乎所有更简单的答案都只是忽略“节流”中的调用，而不是将执行延迟到下一个时间间隔。

这是一个简单的实现，还可以处理“节流”调用：

const throttle = (func, limit) => {
  let lastFunc;
  let lastRan = Date.now() - (limit + 1); //enforces a negative value on first run
  return function(...args) {
    const context = this;
    clearTimeout(lastFunc);
    lastFunc = setTimeout(() => {
      func.apply(context, args);
      lastRan = Date.now();
    }, limit - (Date.now() - lastRan)); //negative values execute immediately
  }
}

对于简单的去抖动，这几乎是完全相同的实现。它只是添加了超时延迟的计算，该计算需要跟踪上次运行该函数的时间。见下文：

const debounce = (func, limit) => {
  let lastFunc;
  return function(...args) {
    const context = this;
    clearTimeout(lastFunc);
    lastFunc = setTimeout(() => {
      func.apply(context, args)
    }, limit); //no calc here, just use limit
  }
}