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

似乎这是竞争条件。实际上，如果您快速滚动页面，则会发生以下情况：

setInterval被触发
dom中已有12张图片，因此var number = $(".directory").children().length为12。
现在使用ajax从服务器获取新数据。

现在，如果我仍然在页面底部并且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);
}

PHP无限滚动拉随机结果？

1 个答案: