Question

在JavaScript函数中，我有以下代码：

clicker1.addEventListener("click", nextImage, true);

问题在于，快速单击带有此事件的按钮时，它将导致错误。

我需要这样做，以便一旦在该处单击按钮，就会延迟单击事件不运行该功能的时间。

Answer 1

您要寻找的模式称为throttling。

这是节流功能的示例实现：

const throttle = (func, limit) => {
  let lastFunc
  let lastRan
  return function() {
    const context = this
    const args = arguments
    if (!lastRan) {
      func.apply(context, args)
      lastRan = Date.now()
    } else {
      clearTimeout(lastFunc)
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args)
          lastRan = Date.now()
        }
      }, limit - (Date.now() - lastRan))
    }
  }
}

该函数将要节流的函数作为参数以及limit参数作为参数，该参数是允许下一个函数调用之前的时间间隔（以毫秒为单位）。

它返回另一个函数，该函数在指定的时间间隔内执行提供的函数。

您可以这样使用它：

clicker1.addEventListener("click", throttle(nextImage, 1000), true);

因此，现在，如果有人“垃圾邮件单击”您的答题器按钮，则nextImage函数仅每秒执行一次。

注意：如果您使用Lodash，则可以使用其自己的油门实现_.throttle。

Answer 2

如何在使用setTimeout的同时短暂禁用按钮。在此示例中，该按钮被禁用了2000 ms。

function myFunction() {
  console.log('clicked !!');
  document.getElementById("myButton").disabled = true;
  setTimeout(function(){
    document.getElementById("myButton").disabled = false;
  },2000);
}

<button onClick="myFunction()" id="myButton">Press me</button>

使用JavaScript向事件监听器添加冷却时间

2 个答案: