javascript - JQuery AJAX 调用函数运行两次

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 变量，并且在加载完成之后(在 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) { ...