0

我有一个从我的表中返回 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);
4

1 回答 1

1

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

  1. setInterval 被触发
  2. dom 中已经有 12 个图像，因此var number = $(".directory").children().length是 12 个。
  3. 现在使用 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);
}
于 2013-08-07T18:30:23.250 回答