jQuery激活(绑定)滚动后解除绑定

jQuery activate (bind) scroll after unbind

本文关键字：绑定 滚动 激活 jQuery      更新时间：2023-09-26

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

我已经使用$(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);
    }
});

第二次调用$(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);

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

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

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

有两种方法可以实现你想要做的事情。您已经询问了关于重新绑定事件的问题，因此让我们首先讨论这个问题。您将需要一个命名的，而不是匿名的函数，然后您只需在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);

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

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

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

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();
    }
});
相关文章：