jQuery scroll() 检测用户何时停止滚动使用 jQuery 油门/去抖动使用 Lodash

2022-08-30 05:05:41

好吧..

$(window).scroll(function()
{
    $('.slides_layover').removeClass('showing_layover');
    $('#slides_effect').show();
});

我可以从我的理解中分辨出某人何时滚动。因此,我试图弄清楚当有人停下来时如何捕捉。从上面的示例中,您可以看到我在滚动时从一组元素中删除一个类。但是,我想在用户停止滚动时重新打开该类。

这样做的原因是我打算在页面滚动时进行中途停留,以使页面具有我正在尝试处理的特殊效果。但是我试图在滚动时删除的一个类与该效果冲突,因为它对某些性质具有透明度效果。


答案 1
$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

更新

我写了一个扩展来增强jQuery的默认-event-handler。它将一个或多个事件的事件处理程序函数附加到所选元素,并在给定时间间隔内未触发事件时调用该处理程序函数。如果要仅在延迟后触发回调(如 resize 事件等),这将非常有用。on

检查github-repo以获取更新非常重要!

https://github.com/yckart/jquery.unevent.js

;(function ($) {
    var on = $.fn.on, timer;
    $.fn.on = function () {
        var args = Array.apply(null, arguments);
        var last = args[args.length - 1];

        if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);

        var delay = args.pop();
        var fn = args.pop();

        args.push(function () {
            var self = this, params = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(self, params);
            }, delay);
        });

        return on.apply(this, args);
    };
}(this.jQuery || this.Zepto));

像使用任何其他或 -event 处理程序一样使用它,除了您可以将一个额外的参数作为最后一个参数传递:onbind

$(window).on('scroll', function(e) {
    console.log(e.type + '-event was 250ms not triggered');
}, 250);

http://yckart.github.com/jquery.unevent.js/

(这个演示使用而不是,但谁在乎?!resizescroll


答案 2

使用 jQuery 油门/去抖动

jQuery debounce对于这样的问题来说是一个很好的选择。jsFidlle

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING!');
}));
$(window).scroll($.debounce( 250, function(){
    $('#scrollMsg').html('DONE!');
}));

第二个参数是“at_begin”标志。在这里,我展示了如何在“滚动开始”和“滚动完成”时执行代码。

使用 Lodash

正如Barry P所建议的那样,jsFiddleunderscorelodash也有一个去抖动,每个都有稍微不同的api。

$(window).scroll(_.debounce(function(){
    $('#scrollMsg').html('SCROLLING!');
}, 150, { 'leading': true, 'trailing': false }));

$(window).scroll(_.debounce(function(){
    $('#scrollMsg').html('STOPPED!');
}, 150));