0

编辑：不幸的是，答案和建议并没有完全解决这个问题。我可能不得不切换到“查看更多帖子”按钮，而不是使用滚动，因为我认为这是问题所在。尽管我在任何地方都找不到解决方案，但最终能找到解决方案会很棒。

我的解决方案是添加超时事件。可怕又肮脏。这个：

complete: function (data) {
    setTimeout(function() {
        $("#loading-posts").fadeOut("fast");
        $isFetchingNotes = false;
    }, 1000);
}

我为我的网站写了一个自定义博客。当用户滚动时，较旧的帖子会出现并通过 JQuery AJAX 自动加载。这是有效的 - 但是，它获取数据的次数似乎比我想要的多 2、3 或 4 次。事实上，我只希望它获取一次数据。所以我放了一个“正在运行”的类型变量，但这也不起作用，它仍然不止一次地获取数据并复制帖子。这是我的代码：

$(window).scroll(function(){

    var $scroll = $(window).scrollTop();
    var $docHeight = $(document).height();
    var $winHeight = $(window).height();
    var $lastPost = ($(".note-area:last").attr("id") - 1);

    if($scroll === $docHeight - $winHeight) {

        if(!$isFetchingNotes) {

            var $isFetchingNotes = true;

            $("div.more-posts").show();
            $("#loading-posts-gif").fadeIn("slow");

            $.ajax({
                type: "GET",
                url: 'loadnotes.php" ?>',
                data: { 
                    'lastPost': $lastPost
                },
                cache:true,
                success: function(data) {
                    if(data) {

                        $('div#post-area').append(data);
                        $('div.more-posts').hide();

                    } else {
                        $('div.more-posts').replaceWith("<h4>-- End of notes --</h4>");
                    }
                },
                complete: function () {
                    $("#loading-posts").fadeOut("fast");
                }   
            }).error(function (event, jqXHR, ajaxSettings, thrownError) {
                $('div.more-posts').html("<h2>Could not retrieve data</h2>");
            });

            $isFetchingNotes = false;

        } // End if $isfetchingnotes

    } // End if scroll load point

}); // End onscroll event

尽管 $isFetchingNotes 变量设置为 true，但任何人都可以解释为什么它可能会尝试继续获取数据吗？谢谢！

4

2 回答 2

1

您需要在函数$isFetchingNotes外部声明变量scroll：

var $isFetchingNotes = false;
$(window).scroll(function(){
...
}

ajax 完成后再次将其更改为 false：

complete: function(){
    $isFetchingNotes = false;
    ...
}
于 2013-04-29T19:51:21.383 回答
1

拉扎克得到了一半。您需要函数外部的变量，并且在加载完成（在回调中）$isFetchingNotes之​​前，您不需要将其返回为 false 。complete这里是：

  var $isFetchingNotes = false;

    $(window).scroll(function(){

        var $scroll = $(window).scrollTop();
        var $docHeight = $(document).height();
        var $winHeight = $(window).height();
        var $lastPost = ($(".note-area:last").attr("id") - 1);

        if($scroll > $docHeight - $winHeight) {

            if(!$isFetchingNotes) {

                $isFetchingNotes = true;

                $("div.more-posts").show();
                $("#loading-posts-gif").fadeIn("slow");

                $.ajax({
                    type: "GET",
                    url: 'loadnotes.php" ?>',
                    data: { 
                        'lastPost': $lastPost
                    },
                    cache:true,
                    success: function(data) {
                        if(data) {

                            $('div#post-area').append(data);
                            $('div.more-posts').hide();

                        } else {
                            $('div.more-posts').replaceWith("<h4>-- End of notes --</h4>");
                        }
                    },
                    complete: function () {
                        $("#loading-posts").fadeOut("fast");
                        $isFetchingNotes = false;
                    }   
                }).error(function (event, jqXHR, ajaxSettings, thrownError) {
                    $('div.more-posts').html("<h2>Could not retrieve data</h2>");
                });


            } // End if $isfetchingnotes

        } // End if scroll load point

    }); // End onscroll event

另外，我建议不要让条件恰好是$scroll那个位置，因为它不会为滚动的每个像素触发。你最好把：

if($scroll > $docHeight - $winHeight) { ...

代替：

if($scroll === $docHeight - $winHeight) { ...
于 2013-04-29T20:30:30.383 回答