如何实现单次用户请求仅触发一次鼠标滚动检测

嘿，我来帮你解决这个鼠标滚动检测的问题！首先咱们先理清楚两个关键点：你原来的代码为啥滚动时没法持续触发，以及怎么实现一次滚动动作只触发一次检测逻辑。

先修复事件无法触发的问题 #

你原来的代码有两个小坑：

1. jQuery的引用放在了自定义代码后面——这就导致浏览器执行$(window).bind(...)的时候，jQuery还没加载好，自然绑定不上事件！
2. HTML里用了<image>标签，正确的写法应该是<img>，这个小错误可能会影响页面布局，间接让滚动事件触发异常。

调整后的基础代码应该是这样的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).bind('mousewheel', function(event) { 
    console.log("hello");
});
</script>
<div></div>
<img src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg" alt="示例壁纸">

这样滚动的时候，控制台应该就能持续输出"hello"了。

实现单次滚动仅触发一次检测 #

如果你的核心需求是一次滚动动作（不管你滚了多少圈）只触发一次检测，那直接绑定mousewheel会因为滚动过程中事件连续触发，导致代码执行N次。这时候咱们可以加个简单的防抖逻辑：

// 用一个标记位来锁定滚动检测
let isScrollLocked = false;

$(window).bind('mousewheel', function(event) {
    if (!isScrollLocked) {
        isScrollLocked = true;
        console.log("单次滚动触发啦！");
        
        // 设定300ms的锁定时间，这段时间内的滚动都不会触发逻辑
        // 你可以根据需求调整这个时间，比如200ms或者500ms
        setTimeout(() => {
            isScrollLocked = false;
        }, 300);
    }
});

原理很简单：第一次触发滚动时，我们先把标记位设为true，执行你的检测逻辑，然后过一小段时间再把标记位改回false。这样在滚动的过程中，后续的事件都会被忽略，直到滚动动作停下来，才允许下一次触发。

额外小提示 #

• 如果你遇到浏览器兼容性问题，mousewheel事件在部分浏览器里可能不太好使，可以换成更标准的wheel事件，用法是一样的：

  $(window).bind('wheel', function(event) {
      // 同样的防抖逻辑就行
  });
  

• 如果你的“单次用户请求”指的是页面的单次HTTP请求周期内只能触发一次，那可以把标记位存在sessionStorage里，在请求开始或结束的时候重置它就行。

内容的提问来源于stack exchange，提问作者user9269971