Question

当我绑定功能滚动并滚动鼠标滚轮一次时，该功能运行七到八次。当我滚动鼠标滚轮一次时，我希望它只运行一次，这可能吗？我使用这段代码：

$(document).ready(function () {
    $(window).bind('scroll', function() {
        alert("Scroll.");          
    }   
    });
});

Answer 1

尝试

$(document).ready(function () {
    var timerId;
    $(window).bind('scroll', function() {
        clearTimeout(timerId)
        timerId = setTimeout(function(){
            alert("Scroll.");          
        }, 200)
    });
});

演示：Fiddle

Answer 2

您可以使用jQuery throttle debounce插件中的限制功能。

$(function() {
    $(window).bind('scroll', $.throttle(100, function() {
        console.log('scroll');
    }));
});

Answer 3

只是Aruns的一个变种回答：

类似的方法，只是事件被立即触发，然后被阻止在一段时间内再次处理。这样您就不必在处理事件之前等待。

$(document).ready(function () {
    var locked = false
        , timeout;

    $(window).bind('scroll', function() {
        //do nothing if still locked
        if(true === locked){
            return false;
        }
        //lock
        locked = true;

        //do something if not locked
        alert('scroll!')

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            //unlock
            locked = false;         
        }, 1000)
    });
});

Answer 4

如果用“一次”表示，每页加载一次，您可以使用off()方法取消绑定侦听器中的事件。 http://api.jquery.com/off/

还有可能发生命名空间事件，如：

scroll.namespace 仍然是同一个事件，但你可以专门解开它。

$(document).ready(function () {
    $(window).on('scroll.myEvent', function() {
        $(window).off('scroll.myEvent');
        alert("Scroll.");          
    }   
    });
});

Answer 5

如果您只想检测一次滚动，请使用：

$(function () {
    var done = false;
    $(window).bind('scroll', function() {
       if (!done){
           alert("Scroll.");
           done = true;
       }
   });
});

但如果您想检测每个滚动事件，请尝试类似答案4

jQuery - 如何将滚动视为单个事件？

5 个答案: