unQuery后jQuery激活（绑定）滚动

I am firing an event when I scroll to the bottom of the page, but I don't want it to fire more than once in a 2 second period.

当我滚动到页面底部时,我正在触发一个事件,但我不希望它在2秒钟内触发多次。

I've used $(window).unbind('scroll'); to unbind it so it doesn't fire more than once. How can I "rebind" or "bind" it so that the scroll function can be active again after 2 seconds?

我用过$(window).unbind('scroll');取消绑定它不会不止一次。如何“重新绑定”或“绑定”它以便滚动功能可以在2秒后再次激活?

$(window).scroll(function() {

    scroll_pos = $(window).scrollTop();     
    win_height = $(window).height();        
    doc_height = $(document).height();      

    if(scroll_pos + win_height > doc_height - 100) {

        $('#gifLoad').show();
        $(window).unbind('scroll');

        setTimeout(function(){

            $('#gifLoad').hide();
            //$(window).bind('scroll');     //<--- this doesn't work..

        }, 2000);
    }
});

3 个解决方案

#1

You have to specify what to bind the second time you're calling $(window).bind

您必须在第二次调用$(window).bind时指定要绑定的内容

function onScroll() {
    scroll_pos = $(window).scrollTop();     
    win_height = $(window).height();        
    doc_height = $(document).height();      

    if(scroll_pos + win_height > doc_height - 100) {

        $('#gifLoad').show();
        $(window).unbind('scroll');

        setTimeout(function(){    
            $('#gifLoad').hide();
            $(window).bind('scroll', onScroll);    
        }, 2000);
    }
}
$(window).scroll(onScroll);

Or you could set a flag to ignore events for two seconds

或者你可以设置一个标志来忽略事件两秒钟

// You can wrap all this in a self calling anonymous function  to avoid a global;
var ignoreScroll = false;
$(window).scroll(function() {
    if (ignoreScroll) return;


    scroll_pos = $(window).scrollTop();     
    win_height = $(window).height();        
    doc_height = $(document).height();      

    if(scroll_pos + win_height > doc_height - 100) {

        $('#gifLoad').show();

        ignoreScroll = true;

        setTimeout(function(){
            ignoreScroll = false;
            $('#gifLoad').hide();
        }, 2000);
    }
});

#2

If you want to (re-)bind the event, you need to pass a handler function. jQuery doesn't magically know that you want to re-bind the previously removed scroll event handler just because you've not passed anything.

如果要(重新)绑定事件,则需要传递处理函数。 jQuery没有神奇地知道你想要重新绑定以前删除的滚动事件处理程序只是因为你没有传递任何东西。

There are two ways to achieve what you want to do. You've asked about re-binding the event, so let's cover that first. You'll need a named, rather than anonymous, function, then you just pass a reference to that when calling .bind() in your setTimeout:

有两种方法可以实现您想要做的事情。你已经问过重新绑定事件了,所以让我们首先介绍一下。你需要一个命名而不是匿名的函数,然后你在setTimeout中调用.bind()时只传递一个引用:

function handleScroll() {

    scroll_pos = $(window).scrollTop();     
    win_height = $(window).height();        
    doc_height = $(document).height();      

    if(scroll_pos + win_height > doc_height - 100) {

        $('#gifLoad').show();
        $(window).unbind('scroll');

        setTimeout(function(){

            $('#gifLoad').hide();
            $(window).bind('scroll', handleScroll); // bind to call the same function again

        }, 2000);
    }
}

$(window).scroll(handleScroll);

The second method, which should be more efficient since you don't need to keep removing and adding event handlers, is to use a boolean flag to determine if you actually run that extra bit of logic:

第二种方法应该更高效,因为您不需要继续删除和添加事件处理程序,是使用布尔标志来确定您是否实际运行了额外的逻辑:

var runScrollLogic = true;

$(window).scroll(function() {

    scroll_pos = $(window).scrollTop();     
    win_height = $(window).height();        
    doc_height = $(document).height();      

    if(scroll_pos + win_height > doc_height - 100 && runScrollLogic === true) {

        $('#gifLoad').show();
        runScrollLogic = false; // disables execution of this part

        setTimeout(function(){

            $('#gifLoad').hide();
            runScrollLogic = true; // enables execution again

        }, 2000);
    }
});

#3

As an alternative, you could use the current time and the time the event was fired last.

作为替代方案,您可以使用当前时间和最后触发事件的时间。

var lastScrollTime = null;

$(window).scroll(function() {
    var currentTime = (new Date()).getTime();

    if ((lastScrollTime == null) || ((currentTime - lastScroll) >= 2000)) {
        scroll_pos = $(window).scrollTop();     
        win_height = $(window).height();        
        doc_height = $(document).height();      

        if(scroll_pos + win_height > doc_height - 100) {
            $('#gifLoad').show();
        }

        setTimeout(function(){
            $('#gifLoad').hide();
        }, 2000);

        lastScrollTime = (new Date()).getTime();
    }
});