javascript - Javascript滚动到底部生成重复请求

Question

我有以下用于创建一种无限滚动 UI 的 javascript 代码。问题是当我用鼠标滚轮滚动时，它会产生几个请求。

样品在这里

var canLoad = true;

$(window).scroll(function()
{ 
    if($(window).scrollTop() == $(document).height() - $(window).height() && canLoad)
    {
    canLoad = false;
            $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "/loadmore.html",
        success: function(html)
        {
            if(html)
            {
            var $html = $(html);
            $html.imagesLoaded(function() {
                $('div#loadmoreajaxloader').hide();
                $("#container").masonry('appended', $html, true);
            }).appendTo($("#container"));
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more backgrounds to show.</center>');
            }
        }
        });
        canLoad = true;
    }
});

Answer 1

您最好的选择是在您的scroll函数中使用计时器，并在每次请求之前取消它：

var timer;

$(window).scroll(function()
{
    timer && clearTimeout(timer);

    timer = setTimeout(function()
    {
        // Run whatever code you want here...
    }, 300);
});

这是小提琴：http: //jsfiddle.net/FcxSL/

Answer 2

我读错了你的问题，

这是你需要做的，确保当你在你的 ajax 内容中给一个 ajaxed div 一个 id 。然后你放一个 if 语句

检查该元素是否存在，如果存在，它将不再执行发布请求，如果它不在 dom 中，它将执行请求。