Question

我想创建一个无限滚动页面，但我有一个问题。

我的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'); });
}

但它不起作用。

Answer 1

也许不是重新绑定包含逻辑的滚动函数，而是尝试绑定一个＆＃34;禁用＆＃34;滚动，然后在内容准备再次滚动后删除此功能。您可以将jquery namespace events用于此

尝试

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

然后在.done取消绑定

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

Answer 2

我无法准确地为您提供解决方案。但尝试这样的事情。您可以使用全局变量维护状态。

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

Answer 3

我使用get承诺

来做

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

    waiting = true;
});

并从get

返回loadElements承诺

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

运行功能，禁用滚动，但在回调时启用

3 个答案: