Question

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

现在，只要用户点击页面末尾，它就会加载所有数据。

有没有办法让我的脚本“等到最后一页加载结束”＃39;。

$( ".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

正如你猜测的那样，你需要一个外部变量来转动＆＃34;加载更多地方＆＃34; -switch开启和关闭。

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/

jquery / ajax无限滚动事件

2 个答案: