jQuery / ajax无限滚动事件

Question

我正在尝试在我的Web应用程序上使用ajax，php，mysql进行自己的无限滚动。 但是，我找不到每当用户到页面末尾时都加载新内容的方法。

现在，它会在用户点击页面末尾时立即加载所有数据。

有什么方法可以让我的脚本“等到最后加载的页面结束”。

$( ".places-wrapper ").scroll(function(){

var windowHeight = $( ".places-wrapper" ).height();
var documentHeight = $( ".places-wrapper")[0].scrollHeight;
var scrollFromTop = $( ".places-wrapper" ).scrollTop();
var margin = 70;

if( scrollFromTop >= documentHeight - windowHeight - margin){

loadNextPage();

}

function loadNextPage(){

    var PlaceID = $( "input[name='placeID']:last" ).val();
    var lastHitDate = $( "input[name='hitDate']:last" ).val();

    $.ajax({
        # .append the new stuff
           });

}

});

Answer 1

我猜您需要的是一个标志，以告诉您的脚本页面正在加载。 您可以尝试以下方法：

// add a variable as flag
var isLoading = false;

if( scrollFromTop >= documentHeight - windowHeight - margin){

     if ( !isLoading )
     {
        isLoading = true;
        loadNextPage();
     }    
}


// inside your ajax's success callback:

.success(function(){
    isLoading = false;

    // add the page contents
})

Answer 2

正如您可能猜到的那样，您需要一个外部变量来打开和关闭“加载更多位置”。

var scrollActiveTimer = false;

$(".places-wrapper").scroll(function(){

    // Don't continue if a previous ajax request is still active
    if(scrollActiveTimer == true){
        return;
    }

    // For an improved performance you should try to minimize the jquery DOM searches    
    var wrapper = $(".places-wrapper");
    var windowHeight = wrapper.height();
    var documentHeight = wrapper[0].scrollHeight;
    var scrollFromTop = wrapper.scrollTop();
    var margin = 70;

    var scrollEndPosition = documentHeight - windowHeight - margin;

    if( scrollFromTop >= scrollEndPosition){
        loadNextPage();
    }

    function loadNextPage(){
        // Disable the loading of further pages for the moment
        scrollActiveTimer = true;

        var PlaceID = $("input[name='placeID']:last").first().val();
        var lastHitDate = $( "input[name='hitDate']:last" ).val();

        // Activate the loading event again
        scrollActiveTimer = false;

         $.ajax({
             // parameters..
         }).success(function(data){
             // copy data into html
             wrapper.append(data);

             // Activate the loading event again
             scrollActiveTimer = false;
         });
    }

});

我用一些虚拟函数来模拟ajax请求和html生成： http : //jsfiddle.net/Macavity/f77xmho7/2/