Question

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

示例HERE

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语句

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

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

2 个答案: