鼠标滚动至指定偏移位置时事件触发两次问题求助

仅在普通PC鼠标上出现异常：滚动鼠标滚轮时，scroll事件会被触发两次，导致alert弹窗弹出两次。使用Apple妙控鼠标或手动拖动浏览器滚动条时无此问题。以下是使用的jQuery代码，请问存在遗漏或操作错误吗？

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= $(
          '#ajax-posts').offset().top + $('#ajax-posts').
            outerHeight() - window.innerHeight) {
                alert('reached check point');
                $("#lds-ripple").css("display", "block");
        }
    });
});

这个问题源于PC鼠标滚轮滚动时，部分浏览器会短时间内重复触发scroll事件，而你的代码没有做触发频率限制或状态校验，导致满足条件时多次执行目标操作。

可以通过以下两种方式解决：

• 防抖(Debounce)限制触发频率：通过定时器延迟执行代码，避免短时间内重复触发
  修改后的代码示例：

  $(document).ready(function () {
      let scrollTimeout;
      $(window).scroll(function () {
          clearTimeout(scrollTimeout);
          scrollTimeout = setTimeout(function() {
              const targetEl = $('#ajax-posts');
              const isReached = $(window).scrollTop() >= targetEl.offset().top + targetEl.outerHeight() - window.innerHeight;
              if (isReached) {
                  alert('reached check point');
                  $("#lds-ripple").css("display", "block");
              }
          }, 200); // 200ms可根据需求调整
      });
  });
  

• 状态标记避免重复执行：设置标记位，确保满足条件时仅执行一次操作（若需再次触发可重置标记）
  修改后的代码示例：

  $(document).ready(function () {
      let hasTriggered = false;
      $(window).scroll(function () {
          const targetEl = $('#ajax-posts');
          const isReached = $(window).scrollTop() >= targetEl.offset().top + targetEl.outerHeight() - window.innerHeight;
          
          if (isReached && !hasTriggered) {
              hasTriggered = true;
              alert('reached check point');
              $("#lds-ripple").css("display", "block");
          } 
          // 若需要滚动离开后再次触发，可添加以下逻辑
          else if (!isReached && hasTriggered) {
              hasTriggered = false;
          }
      });
  });
  

如果需求是滚动到目标位置仅触发一次，优先选择状态标记方案；若需滚动过程中多次触发但避免高频重复，防抖方案更合适。

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