Question

Well I made an Infinite scroll script, which is performing quite well. But just in Chrome and IE. Unfortunaly it doesn’t perform the sync call on firefox but still hammers the server async… Meaning I get tons of content back which shouldn’t have been requested… As I was googling around and didn’t find a clear solution for my problem so I’ll ask you guys:

var endajax = 0;

$(window).scroll(function(){
    if (endajax == 0)
    {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 405) 
    {
            $('#profilecontent').prepend('<div class="iloader bgtrans padding ui-corner-all" style="position: fixed; bottom: 20px; right: 80px;"><div class="ui-widget-content ui-corner-all padding"><img width="8" src="images/loader.gif" alt="" /> Inhalt wird nachgeladen, bitte einen Moment gedulden</div></div>');
        var firstid = $('.postbox').last().attr('name');    
        var lastid = $('.postid').last().val(); 
        var data = "firstid="+firstid+"&lastid="+lastid+"&uid=<?php echo $profileuser->id; ?>"; 
        setTimeout(function() {
            $('.iloader').remove();
        }, 2000);
        $.ajax({
        url: "modules/users/profile/profileposts.php",
        cache: false,
        type: "POST",
        async: false,
        data: data,
            success: function(data){
                if (data.length != 2) {
                      $('#profileposts').append(data).fadeIn('slow');
                }
                else
                {
                    endajax = 1;
                }                           
            },
        });
    }
}
});

Answer 1

Perhaps lock your semaphore before the ajax call?

if($(window).scrollTop() + $(window).height() > $(document).height() - 405) 
{
 endajax++;

and then

success: function(data){
            if (data.length != 2) {
                  endajax = 0;//or 1 depending on how you are locking this control out
                  $('#profileposts').append(data).fadeIn('slow');
            }