时间戳

首页 > 解决方案 > 鼠标滚轮触发时多次触发函数

javascript - 鼠标滚轮触发时多次触发函数

问题描述

我想创建一个单页和单节网站。该部分有一个分页，当鼠标向上/向下滚动时会更改页面。

我尝试实现鼠标滚轮事件，但该事件不仅触发了多次，而且在一次向下/向上滚动事件中多次更改了我的页码。我已经检查了滚动和鼠标滚轮事件，但每个事件总是不仅触发一次，而且在一个滚动事件上多次触发

var page = 1;
$(window).bind('mousewheel', function(event) {
  if (event.originalEvent.wheelDelta >= 0) {
    $('#page-number').html(page++);
    console.log('Scroll up');
  } else {
    $('#page-number').html(page--);
    console.log('Scroll down');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Page <span id="page-number">1</span></div>

我希望当鼠标向上/向下滚动不多次时，页面只会更改一次。

标签： javascriptjqueryhtml

解决方案

您可以使用lodash.js中的debounce或throttle函数。

例子：

let page = 1;

const mouseWheelHandler = (event) => {
  if (event.originalEvent.wheelDelta >= 0) {
    $('#page-number').html(page++);
    console.log('Scroll up');
  } else {
    $('#page-number').html(page--);
    console.log('Scroll down');
  }
}

// will be called in a half of second after user stops to scroll
$(window).bind('mousewheel', _.debounce((event) => mouseWheelHandler(event), 500));

// will be called once in a second while user keeps scrolling
// $(window).bind('mousewheel', _.throttle((event) => mouseWheelHandler(event)), 1000));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<div>Page <span id="page-number">1</span></div>

推荐阅读