Javascript 函数节流

Question

我想使用 JS Throttle。但我正在努力让它正常工作。

我尝试了这篇文章中的代码： https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

但是油门没有按预期工作，因为每次我点击按钮时，一个“|”被添加到 div。没有点击被丢弃。

错在哪里？

function foo() {
 $("#respond").append("|");
}

const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

var onClick = function() {
    throttle(foo(), 50000);
};

$('#button').click(onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<div id="respond"></div>

Answer 1

为了 throttle(func, limit) 工作，它的产品只能有一个实例。

问题是您示例中的 onClick 函数在每次调用时都会创建一个新实例。

这使得基础 inThrottle 变量毫无意义，因为每次点击都会创建一个新副本。

解决办法是直接调用throttle(foo, 50000)乘积的一个实例。

此外，foo本身应该被传递（而不是它的乘积）。

请参阅下面的实际示例，以及 closures and scope 了解更多信息。

// Foo.
const foo = (...args) => {
  $("#respond").append("|");
}

// Throttle.
const throttle = (func, limit) => {
  let inThrottle
  return (...args) => {
    if (!inThrottle) {
      func(...args)
      inThrottle = setTimeout(() => inThrottle = false, limit)
    }
  }
}

// On Click.
const onClick = throttle(foo, 1000)

// Button - Click.
$('#button').click(onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<div id="respond"></div>

Answer 2

您的 onClick 会在每次调用时创建一个新的节流函数。你必须确保只被限制一次

var onClick = function() {
    throttle(foo(), 50000);
};
// TO

var onClick = throttle(foo, 50000);

Answer 3

我知道这个问题已经过时了。

我做了一个小片段。我认为它应该是一种限制功能的简单方法。这将保证每等待毫秒调用一次。

function throttle( fn, wait ){
  let lastCall = 0;
    return function(){
    if( Date.now() - lastCall > wait  ){
      lastCall = Date.now()
      fn()
    }
  }
}

var counter = 0

var count = () => document.querySelector("#count").textContent = ++counter

window.addEventListener('scroll', throttle( count, 1000 ) )

body{
  height: 2000px;
}

<h1 id='count'>
  0
</h1>

Javascript 函数节流

Javascript Function Throttling

javascript

throttling