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

Question

假设我有这样一个 scroll/wheel 事件：

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

你可以定义加载变量并在运行函数之前每次检查

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 2

在第一个轮子后等待 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>

Answer 3

您可以使用removeEventListener()功能。 documentation

示例：

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);

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

How to detect a scroll / wheel event only once in a certain period of time?

javascript

events

scroll

mousewheel