Question

我正在创建一个与我们的数据库一起使用的无限滚动。

经过多次头痛和反复试验，我得到了它的工作......几乎。

我遇到一个非常奇怪的问题，可以由更高级的开发人员轻松解决。

当我将文件上传到实际网站并在第一次测试时，一切都运行良好。

但是如果我要刷新这个页面，或者在另一个窗口中打开它，我会得到一个错误，它会加载我的ajax查询两次......即使我要切换标签..

因此，在我向下滚动以填充接下来的10条记录之后，它会将这10条记录拉两次（总共20条记录）。它会对列表的其余部分执行此操作。

我不确定这是浏览器问题还是代码中的问题？任何帮助将不胜感激。 我的剧本

<script type="text/javascript">
jQuery(document).ready(function() {

    jQuery(window).scroll(function() {
        if(jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {

            jQuery('div#loadMore').show();
            jQuery.ajax({
                url: "ajax.php?lastCourse="+ jQuery(".wrap:last").attr("id"),
                success: function(html) {
                    if(html){
                        jQuery("#infiscroll").append(html);
                        jQuery('div#loadMore').hide();
                    }else{
                        jQuery('div#loadMore').replaceWith("<center><h1 style='color:red'>End of Content !!!!!!!</h1></center>");
                    }
                }
            });
        }
    });
});

我的AJAX

if ($_GET['lastCourse']) {
$val = $_GET['lastCourse'];
$query = $db -> query ('SELECT * FROM course WHERE IDCourse >"'    .mysql_real_escape_string( $_GET['lastCourse']) . '"  ORDER BY IDCourse ASC LIMIT 0, 10');
while($row = $query->fetch()) {
?>
......
<?php } ?>

Answer 1

请记住，如果向下滚动并刷新，浏览器会自动滚动到您之前的位置。因此，这可以解释您的行为。

如果您要详细解释如何处理此问题，我会尝试提供帮助。

此外，您没有持续ajax请求的信号量（如果有正在进行的ajax请求，请不要再检索任何条目）。使用信号量，您的代码将如下所示：

<script type="text/javascript">
jQuery(document).ready(function() {
    var is_loaded = true;
    jQuery(window).scroll(function() {
        if(jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {

            jQuery('div#loadMore').show();

            if (is_loaded)
            {
                is_loaded = false;
                jQuery.ajax({
                    url: "ajax.php?lastCourse="+ jQuery(".wrap:last").attr("id"),
                    success: function(html) {
                        is_loaded = true;
                        if(html){
                            jQuery("#infiscroll").append(html);
                            jQuery('div#loadMore').hide();
                        }else{
                            jQuery('div#loadMore').replaceWith("<center><h1 style='color:red'>End of Content !!!!!!!</h1></center>");
                        }
                    }
                });
            }
        }
    });
});

无限滚动浏览器问题？

1 个答案: