Question

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

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

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，它为什么试图继续获取数据？谢谢！

Answer 1

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

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

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

complete: function(){
    $isFetchingNotes = false;
    ...
}

Answer 2

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

  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) { ...

JQuery AJAX调用函数运行两次

2 个答案: