Javascript jquery/ajax无限滚动事件

我正在尝试在我的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
           });

}

});

---

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

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

---

正如您可能猜到的，您需要一个外部变量来打开和关闭负载开关

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生成：

@gtgye，谢谢，但是我仍然面临同样的问题。这是因为scrollFromTop>=documentHeight-windowHeight-margin这一行多次激活了事件。