加載所有帖子后如何阻止代碼嘗試從數據庫加載更多帖子

Question

當用戶成功到達頁面底部時，我的代碼加載了新數據，但是仍然加載了DB中的所有帖子時，代碼嘗試獲取更多帖子，這導致頁面停留了幾秒鍾。 我需要的是一種機制，用於檢測何時已從數據庫加載了最后一個帖子並阻止了代碼的執行。

function yHandler(){

var id=$(".output:last").attr("id");

        var split = id.split("output");
    var newid=split[1];
    var awrap = document.getElementById('awrap');
    var contentHeight = awrap.offsetHeight;
    var yOffset = window.pageYOffset; 
    var y = yOffset + window.innerHeight;
    var sesid=$("#sesid").val();
    if(y >= contentHeight){
        // Ajax call to get more dynamic data goes here
    $.ajax({
    url:"load.php",
    type:"POST",
    data:'did=' + did + '&newid=' + newid + '&id=' + id + "&sesid=" + sesid,
    success:function(data){

    $("#newdata").append(data);

});


} ///if end

} /// FUNC END

window.onscroll = yHandler;

load.php //
$osql=mysql_query("SELECT * FROM answer WHERE respond IS NOT NULL AND question_id='$did' AND id < '$newid' and pinned = '0' ORDER BY resp_time DESC LIMIT 5");
/// while loop which fetches data is below

Answer 1

如果您不想或不需要處理用戶在此網頁上時其他帖子可能通過其他方式顯示的情況，那么您可以在沒有更多帖子時設置一個標志，然后檢查該標志並避免如果設置了該標志，則調用load.php 。

// flag so we know when there are no more posts
var noMorePosts = false;

function yHandler(){
    var id=$(".output:last").attr("id");
    var split = id.split("output");
    var newid=split[1];
    var awrap = document.getElementById('awrap');
    var contentHeight = awrap.offsetHeight;
    var yOffset = window.pageYOffset; 
    var y = yOffset + window.innerHeight;
    var sesid=$("#sesid").val();
    if(!noMorePosts && y >= contentHeight){
        // Ajax call to get more dynamic data goes here
        $.ajax({
            url:"load.php",
            type:"POST",
            data:'did=' + did + '&newid=' + newid + '&id=' + id + "&sesid=" + sesid,
            success:function(data){
                 // pseudo code check to see if data was empty
                 // you fill in the actual test here
                 if (nothing in data) {
                     noMorePosts = true;
                 } else {
                     $("#newdata").append(data);
                 }
            });
      }
}

Answer 2

您也可以從后端返回執行的時間戳，然后在客戶端中請求該時間戳以再次獲取或不獲取數據。 就像緩存一樣。

（我一會兒給您其他選擇）

這可能是另一種方式（按請求數據緩存）：

function yHandler(){
    yHandler.lastRequest = yHandler.lastRequest || null;    
    var id=$(".output:last").attr("id");
    var split = id.split("output");
    var newid=split[1];
    var awrap = document.getElementById('awrap');
    var contentHeight = awrap.offsetHeight;
    var yOffset = window.pageYOffset; 
    var y = yOffset + window.innerHeight;
    var sesid=$("#sesid").val();
    if(y >= contentHeight){
        // Ajax call to get more dynamic data goes here
        var newRequest = 'did=' + did + '&newid=' + newid + '&id=' + id + "&sesid=" + sesid;
        if(newRequest != yHandler.lastRequest){
          $.ajax({
             url:"load.php",
             type:"POST",
             data: yHandler.lastData,
             success:function(data){
                $("#newdata").append(data);
                yHandler.lastData = newRequest;  //Save the last request data
             }
          });
        }
   }
});

基本上，以上代碼保存了最后一個請求data 。 如果在下一個滾動中它沒有更改，則不要執行ajax調用。

希望這可以幫助。 干杯