在执行时禁用自己的事件监听器

Question

我的网站上有一个很酷的打字效果，当您按 Enter 键时执行，但我不希望用户在执行打字效果时再次按 Enter 键。 这就是我目前正在做的事情：

document.addEventListener("keyup", function(event) {
    if (event.key === 'Enter') {
        getResult(document.getElementById("input").value)
    }
});

我尝试删除事件侦听器本身，但如何将其添加回来？

Answer 1

这取决于打字效果持续时间，但我们假设需要 400 毫秒。所以你想要的是调用

throttle

函数调用。通过首先生成事件处理程序的节流版本可以很好地完成此操作。

这个来自https://www.geeksforgeeks.org/javascript-throtdling/

const throttleFunction = (func, delay) => {
  let prev = 0;
  return (...args) => {
    let now = new Date().getTime();
    if (now - prev > delay) {
      prev = now;
      return func(...args);
    }
  }
}

以及您使用它的方式：

const throttleFunction = (func, delay) => {
  let prev = 0;
  delay = delay || 400;
  return (...args) => {
    let now = new Date().getTime();
    if (now - prev > delay) {
      prev = now;
      return func(...args);
    }
  }
}


document.addEventListener("keyup", throttleFunction(function(event) {
  if (event.key === 'Enter') {
    getResult()
  }
}));


function getResult() {
  console.log("registered");
}

press [Enter] a few times, fast