PHP無限滾動隨機結果？

Question

我有一個頁面從我的表中返回16條記錄。

當用戶滾動到底部時，我從我的表中拉出另外12條記錄，並將它們附加到我以前的結果中，我的問題是我的結果被重複，而不是正確的順序。

JS

// Ajax Getentries.php 
    var url = location.pathname; 
    if(url.indexOf('missing-people.php') > -1) { 
     didScroll = false; 
     $(window).scroll(function() { 
      didScroll = true; 
     }); 
     setInterval(function() { 
      if(didScroll) { 
       didScroll = false; 
       if(($(document).height() - $(window).height()) - $(window).scrollTop() < 100) { 
        var number = $(".directory").children().length; 
        $.ajax({ 
         type: "POST", 
         url: "getentries.php", 
         data: "count=" + number, 
         success: function (results) { 
          $('.directory').append(results).fadein(); 
         } 
        }); 
       } 
      } 
     }, 250); 
    } 

PHP

$result = mysql_query("SELECT * FROM directory LIMIT {$_POST['count']},12"); 

    $c = 1; 
    while($row = mysql_fetch_array($result)) 
     { 
    echo '<div class="entry'; 
        if (($c % 4) == 1) echo ' alpha '; 
       echo ' span3"><span class="name">' . $row['First_Name'] . ' ' . $row['Surname'] . "</span>"; 
       echo '<a href="/missing-people/' . strtolower($row["Location_County_Last_Seen"]) . '/' . strtolower($row["First_Name"]) . '-' . strtolower($row["Surname"]) . '/' . $row["ID"] . '"><img src="/access/upload/' . $row["picture_1"] . '" alt="' . $row['First_Name'] . ' ' . $row['Surname'] . ', missing since ' . $row['Date_Last_Seen'] . ' " /></a>'; 
       echo '<span class="missing-from">Last seen in ' . ucwords($row["Location_County_Last_Seen"]) . '</span><a href="/missing-people/' . strtolower($row["Location_County_Last_Seen"]) . '/' . strtolower($row["First_Name"]) . '-' . strtolower($row["Surname"]) . '/' . $row["ID"] . '">View Profile</a></div>';  
       $c++; 

     } 

    mysql_close($con); 

Answer 1

看起來就像是一個競爭狀態。事實上，如果你快速滾動頁面，這是發生了什麼：

1. 的setInterval的被觸發
2. 目前已經在DOM 12倍的圖像，因此var number = $(".directory").children().length爲12
3. 現在新的數據是來自取出服務器與阿賈克斯。

現在，如果我仍然在頁面的底部，Ajax調用尚未完成，setInterval的將被再次觸發，number仍然解決12個，我該怎麼辦相同的ajax請求。因此重複。

解決此問題可能很簡單，只需在腳本的開始處設置number並在每次進行ajax調用時遞增它即可。

// Ajax Getentries.php 
var url = location.pathname; 
var number = $(".directory").children().length; 
if(url.indexOf('missing-people.php') > -1) { 
    didScroll = false; 
    $(window).scroll(function() { 
     didScroll = true; 
    }); 
    setInterval(function() { 
     if(didScroll) { 
      didScroll = false; 
      if(($(document).height() - $(window).height()) - $(window).scrollTop() < 100) { 
       number += 12; 
       $.ajax({ 
        type: "POST", 
        url: "getentries.php", 
        data: "count=" + number, 
        success: function (results) { 
         $('.directory').append(results).fadein(); 
        } 
       }); 
      } 
     } 
    }, 250); 
}