Jquery 在滚动位置进行Ajax调用时，如何防止函数崩溃？

以下是我正在处理的项目的URL：

当滚动条位于页面下方约3/4时，我尝试允许它加载新内容（使用ajax）：

$(window).scroll(function () { 

    var height = $(window).height();
    var scrollTop = $(window).scrollTop();                                     

    if(scrollTop > (height*3)) {
        numRes = numRes + 20;
        reloadContent();
    }
});

但正如你所看到的（如果你看URL），它会变得疯狂，直到一切都消失

还有编码建议

编辑

该功能似乎在以下情况下运行良好：

$('#loadmore_btn').live('click',function() {
        numRes = numRes + 20;
        reloadContent();
});

---

设置超时以延迟调用ajax

var _timeout;

$(window).scroll(function () { 
    clearTimeout(_timeout);
    var height = $(window).height();
    var scrollTop = $(window).scrollTop();                                     

    if(scrollTop > (height*3)) {
        numRes = numRes + 20;
        _timeout = setTimeout(function(){
                   reloadContent();
                }, 50);
    }
});

---

超时不一定很长，只是为了延迟调用一点，因为滚动事件触发很多。

设置超时以延迟调用ajax

var _timeout;

$(window).scroll(function () { 
    clearTimeout(_timeout);
    var height = $(window).height();
    var scrollTop = $(window).scrollTop();                                     

    if(scrollTop > (height*3)) {
        numRes = numRes + 20;
        _timeout = setTimeout(function(){
                   reloadContent();
                }, 50);
    }
});

---

超时时间不一定很长，只是为了稍微延迟调用，因为scroll事件经常触发。

几天前我也遇到了同样的问题。以下是我如何修复的：

1） 在document.ready的开头，我写下：

$('body').data('isAJAX', false);
$('body').ajaxStart(function(){
    $('body').data('isAJAX', true);
}).ajaxStop(function(){
    $('body').data('isAJAX', false);
});

2） 然后，当我调用ajax时，我只需检查：

if(!$('body').data('isAJAX')){ 
// make my ajax call
}

---

当然，我只有一个可能的ajax调用，所以对我来说很简单，但是。。。这也可能对你有所帮助：）

几天前我也有同样的问题。以下是我如何修复的：

1） 在document.ready的开头，我写下：

$('body').data('isAJAX', false);
$('body').ajaxStart(function(){
    $('body').data('isAJAX', true);
}).ajaxStop(function(){
    $('body').data('isAJAX', false);
});

2） 然后，当我调用ajax时，我只需检查：

if(!$('body').data('isAJAX')){ 
// make my ajax call
}

当然，我只有一个可能的ajax调用，所以对我来说很简单，但是。。。它也可能对你有帮助：）解决了我的问题

事实证明，scrollTop并没有给你一个向下距离的比率，只是一个表示你的滚动位置的数字——因此，如果你向下滚动了3/4页，并且加载了50%以上的内容——如果你的滚动位置没有移动，scrollTop数字将保持不变。总滚动距离仅增加50%

所以我决定使用容器的高度来表示总的滚动距离，而我发现距离（scrollTop/total distance）的比率为.75来表示页面负载

$(window).scroll(function () { 

    var height = $(window).height();
    var scrollTop = $(window).scrollTop(); 
    var scrollAll = $('#container').height();
    var scrollRatio = (scrollTop/scrollAll);

    if(scrollRatio > .75) {
            if(!$('body').data('isAJAX')){ 
                numRes = numRes + 20;
                eReload = 1; //reload all content
                AddOr = 1;
                reloadContent();
                //alert(scrollRatio) will always be around .75
            }
    }
});

感谢lonut Staicu提供上述代码以使函数顺利运行

解决了我的问题

事实证明，scrollTop并没有给你一个向下距离的比率，只是一个表示你的滚动位置的数字——因此，如果你向下滚动了3/4页，并且加载了50%以上的内容——如果你的滚动位置没有移动，scrollTop数字将保持不变。总滚动距离仅增加50%

所以我决定使用容器的高度来表示总的滚动距离，而我发现距离（scrollTop/total distance）的比率为.75来表示页面负载

$(window).scroll(function () { 

    var height = $(window).height();
    var scrollTop = $(window).scrollTop(); 
    var scrollAll = $('#container').height();
    var scrollRatio = (scrollTop/scrollAll);

    if(scrollRatio > .75) {
            if(!$('body').data('isAJAX')){ 
                numRes = numRes + 20;
                eReload = 1; //reload all content
                AddOr = 1;
                reloadContent();
                //alert(scrollRatio) will always be around .75
            }
    }
});

---

---

感谢lonut Staicu提供上述代码以使函数顺利运行

似乎不起作用，请参见URL。它似乎没有立即编写函数，而是将函数引用直接传递到

setTimeout

，而不是字符串。@locrizak谢谢。现在似乎工作得更好了，但仍然有一个问题，它抹去了一切。这可能是一个不同功能的问题，虽然它很可能在您的完整功能中。*不是字面上的按钮，但您得到的想法似乎不起作用，请参阅URL。它似乎没有立即编写函数，而是将函数引用直接传递到

setTimeout

，而不是字符串。@locrizak谢谢。现在似乎工作得更好了，但仍然有一个问题，它抹去了一切。这可能是一个不同功能的问题，因为它很可能存在于您的完整功能中。*不是字面上的按钮，但您得到的想法是+1-对于那些异常的功能！将功能切换到无咖啡因可能有助于使其平静下来。+1-对于那些异常的功能！将功能切换到无咖啡因可能有助于使其平静下来。这似乎效果很好。我唯一的问题是它仍然疯狂地启动函数。谢谢你的代码这似乎很有效。我唯一的问题是它仍然疯狂地启动函数。谢谢你的欢迎。您应该标记我的答案：）但是，您可以这样做：

if（scrollRatio>.75&&！$（'body'）.data（'isAJAX'））{

并删除第二个

if

表示欢迎。您应该标记我的答案：）但是，您可以这样做：

if（scrollRatio>.75&&！$（'body'）.data（'isAJAX'））{

并删除第二个

if