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和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函数节流

3 个答案: