Javascript 函数 throttle

Question

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

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

但是 Throttle 没有按预期工作，因为每次我点击按钮时，一个“|”被添加到 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和 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>