去抖鼠标滚轮

时间:2013-11-22 09:58:08

标签: jquery scroll mousewheel

我正在构建一个自定义jQuery代码,允许用户通过鼠标滚轮浏览网页。

我正在构建的代码是此页面的模拟:Link

一切正常,但鼠标滚轮事件默认会多次触发,使脚本“跳过”完整的div并多次向下/向上滚动,而不只是一次。

我需要一种方法来限制鼠标滚轮只发射一次。在我找到答案的过程中,我发现Ben Alman的剧本使用了'去抖'。

我的问题是;有没有办法去除每个鼠标轮事件而不是去除它的功能?所以基本上告诉“鼠标滚轮”每500毫秒发射一次,并忽略在500毫秒期间发出的所有火焰。

1 个答案:

答案 0 :(得分:3)

如何使用setTimeout来控制事件的触发 - 如:

$("div").html((new Array(1000)).join(" test")).on("mousewheel DOMMouseScroll MozMousePixelScroll", function()
{
    if (!$(this).data('flag'))
    {
        var self = this;
        $(this).data('timeout', window.setTimeout(function()
        {
            $(self).data('flag', false);
        }, 500));

        $(this).data('flag', true);

        console.log('here');
    }
});

小提琴:http://jsfiddle.net/aN4hU/