Javascript JQuery AJAX调用函数运行两次

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

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

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

我为我的网站写了一个自定义博客。当用户滚动时，会出现较旧的帖子，并通过jQueryAjax自动加载。这是工作-但是，它似乎是获取数据的2，3或4倍以上，我希望它。事实上，我只希望它获取一次数据。 所以我放了一个“is running”类型变量，但这也不起作用，它仍然多次获取数据并复制帖子。这是我的密码：

$(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

$（窗口）。滚动（函数（）{
var$scroll=$（window.scrollTop（）；
var$docHeight=$（document.height（）；
var$winHeight=$（window.height（）；
var$lastPost=（$（“.note area:last”）.attr（“id”）-1）；
如果（$scroll===$docHeight-$winHeight）{
如果（！$isFetchingNotes）{
var$isFetchingNotes=true；
$（“div.more-posts”）.show（）；
$（“#加载posts gif”）.fadeIn（“慢”）；
$.ajax({
键入：“获取”，
url:“loadnotes.php”？>，
数据：{
“lastPost”：$lastPost
},
是的，
成功：功能（数据）{
如果（数据）{
$（'div#post area'）。追加（数据）；
$（'div.more-posts'）.hide（）；
}否则{
$（'div.more-posts'）。替换为（“--End of notes--”）；
}
},
完成：函数（）{
$（“#加载桩”）。淡出（“快速”）；
}   
}).错误（函数（事件、jqXHR、ajaxSettings、thrownError）{
$（'div.more-posts'）.html（“无法检索数据”）；
});
$isFetchingNotes=false；
}//如果$isfetchingnotes，则结束
}//如果滚动加载点，则结束
})；//结束onscroll事件

---

任何人都可以解释一下，尽管$isFetchingNotes变量被设置为true，为什么它仍试图继续提取数据？谢谢！

您需要在

滚动
函数外部声明
$isFetchingNotes
变量：

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

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

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

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

而不是：

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

它是异步的，因此设置一个标志，然后在ajax调用下面再次取消设置它，没有任何作用。您需要在完整的处理程序中取消设置该标志。@adaneo另外，对
滚动
方法的每个调用都有自己的“实例”“我相信，
$isFetchingNotes
。如果我弄错了，请纠正我。@Derija93我担心可能是这样。将其更改为完整的处理程序没有任何作用。或者使用任何旧的延迟对象，并逃离回调地狱。@Incognito嘿，你能详细说明你的观点吗？谢谢，这绝对是一场更好的演出。它似乎可以工作，然后我通过不断向下滚动来打破它（这段代码在页面底部触发，很像Facebook）。如此接近。不过仍然不完美..嗨，迈克-非常感谢你的投入。有趣的是，在我读这篇文章之前，我确实放了>而不是=：）。
if($scroll === $docHeight - $winHeight) { ...