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

Question

I want to make a infinite scroll page, but I have a problem.

My loadElements works with $.get , like this:

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

And scrolling:

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

What I want is to run Functions.loadElements(); once on scroll, wait for the // fades in page , then reenable scrolling again. I tried bind/unbind , but with no success. How can I achieve this?

EDIT:

I tried using bind and unbind like this:

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

and in loadElements :

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

But it didn't work.

Answer 1

Maybe instead of rebinding the scroll function that contains the logic, try binding a function that "disables" scrolling and then remove this function once your content is ready to scroll again. You could use jquery namespace events for this

Try with

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

And then in the .done unbind it

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

Answer 2

I can't give you a solution exactly. but try something like this. You can maintain a status with a globle variable.

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

I'd do it with the get promise

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

    waiting = true;
});

and return the get promise from loadElements

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