如何在一段时间内仅检测一次滚动/滚轮事件？

Question

假设我有一个类似的滚动/滚轮事件：

container.addEventListener("wheel", (e) => {
  const isScrollingDown = Math.sign(e.wheelDeltaY);

  // call some function once, don't listen for wheel event anymore
  // then listen for event again when done
}

基于deltaY，我检测到用户是向下滚动还是向上滚动。 当我检测到该函数（立即），立即删除事件侦听器并在函数完成后再次侦听该函数时，如何调用它一次？

我无法从事件侦听器内部删除事件侦听器，对吗？

提前致谢。

Answer 1

您可以使用removeEventListener()函数。 文件资料

例：

let wheelHandler = function(e) {
    toggleListener(wheelHandler, false)
    const isScrollingDown = Math.sign(e.wheelDeltaY);
    // call some function once, don't listen for wheel event anymore
    // then listen for event again when done
    toggleListener(wheelHandler, true)
};
let toggleListener = function(listener, add) {
    if (add) {
        container.addEventListener("wheel", wheelHandler)
    } else {
        container.removeEventListener("wheel", wheelHandler)
    }
}
toggleListener(wheelHandler, true);

Answer 2

您可以定义加载变量并在每次运行之前检查功能

var loading = false
container.addEventListener("wheel", (e) => {
  const isScrollingDown = Math.sign(e.wheelDeltaY);

  if(!loading){
      loading = true;
     // call some function once, don't listen for wheel event anymore
     // then listen for event again when done
     // after done
     loading = false
  }
}

Answer 3

在第一个轮子之后等待1秒：

  function handleWheel(e){ console.log(Math.random()) document.getElementById("container").removeEventListener("wheel", handleWheel) setTimeout(()=>{ document.getElementById("container").addEventListener("wheel", handleWheel); },1000); // return event after 1 second } document.getElementById("container").addEventListener("wheel", handleWheel) 

 <div id="container" >wheel</div>