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

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)
    });
});

演示：小提琴

Answer 2

您可以使用jQuery 油门去抖插件中的油门功能。

$(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

If you want to detect scrolling only once, use this:

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

but if you want to detect every scroll event, try something like the answer 4

Answer 5

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

还有命名空间事件的可能性，例如：

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

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