javascript - jQuery scroll() 检测用户何时停止滚动

Question

好的..

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

根据我的理解，我可以分辨出何时有人在滚动。因此，我想弄清楚如何在有人停下来时 catch 。从上面的示例中，您可以看到我在滚动发生时从一组元素中删除了一个类。但是，我想在用户停止滚动时重新启用该类。

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

Answer 1

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

更新

我编写了一个扩展 来增强 jQuery 的默认 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));

像使用任何其他 on 或 bind 事件处理程序一样使用它，除了您可以将一个额外的参数作为最后一个传递:

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

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

(此演示使用 resize 而不是 scroll，但谁在乎呢？!)