运行函数，禁用滚动，但在回调时启用

Run function, disable scroll, but enable on callback

本文关键字：回调 启用 滚动 函数 运行      更新时间：2023-09-26

我想制作一个无限滚动页面，但我遇到了一个问题。

我的loadElements与$.get一起工作，如下所示：

loadElements: function() {
    // fades out page
    $.get(//..).done(function() {// fades in page});
}

和滚动：

$(window).scroll(function() {
    Functions.loadElements();
});

我想要的是在滚动时运行Functions.loadElements();一次，等待// fades in page，然后重新启用滚动。我试过bind/unbind，但没有成功。我怎样才能做到这一点？

编辑：

我试着这样使用bind和unbind：

$(window).scroll(function() {
    Functions.loadElements();
    $(window).unbind('scroll');
}

在loadElements:中

loadElements: function() {
    // fades out page
    $.get(//..).done(function() {// fades in page; $(window).bind('scroll'); });
}

但它没有起作用。

我不能给你一个确切的解决方案。但是试试这样的东西。您可以使用globle变量来维护状态。

var isLoading = false; 
    $(window).scroll(function(e) {
        if( !isLoading )
        {
          Functions.loadElements();
          isLoading = true;
        }
       e.preventDefault();
    }
    loadElements: function() {
        // fades out page
        $.get(//..).done(function() {// fades in page; isLoading = false; });
    }

也许不要重新绑定包含逻辑的滚动函数，而是尝试绑定一个"禁用"滚动的函数，然后在内容准备好再次滚动后删除此函数。您可以为这个使用jquery命名空间事件

尝试

$(window).scroll(function() {
    Functions.loadElements();
    $(window).bind('scroll.StopScroll', function (e) {
        e.preventDefault(); e.stopImmediatePropagation();
    });
}

然后在.done中解除它的绑定

$(window).unbind('scroll.StopScroll');

我会用get promise

var waiting;
$(window).scroll(function(e) {
    if(waiting){
        e.preventDefault();
        return;
    }
    Functions.loadElements().then(function(){
        waiting = false;
    });
    waiting = true;
});

并从loadElements 返回get承诺

loadElements: function() {
    // fades out page
    return $.get(...).done(function() {...});
}
相关文章：