如何将时间间隔内触发的鼠标滚轮滚动事件减少为单个事件

Question

目前在我的网站，我有一个鼠标轮功能，滚动用户设置位置的网页。但是，当用户滚动得有点快，并且不限制滚动到单个鼠标轮滚动单元时，此函数会触发多次。我如何在特定的时间间隔(比如一秒)内将所有的鼠标轮滚动事件都取下来，并使其触发我的函数一次？

Answer 1

您可以在事件处理程序上使用脱脂。下划线 / 房客提供了取消功能，但jQuery没有。从这里获取的一个简单示例如下所示：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

一旦你有了它，你就可以像这样使用它：

var delay = 1000; // 1s

var handlerFunction = debounce(function (e) {
  console.log(1);
}, delay);

$(document).on('scroll', handlerFunction);

在上次调用处理程序之后，您的处理程序实际上只会执行1000 is。

JSBIN让你玩。

Answer 2

此jQuery代码允许您设置以毫秒为单位的间隔。

​

var intervalMs = 2000;

var last = 0;
$(document).scroll(function() {
  var now = new Date().getTime();
  if (last + intervalMs < now) {
    last = now;
    
    // do stuff
  }
});

​