Question

我希望使用AJAX向我的Feed中添加更多内容，并且确实会添加内容 - 但它会添加两次。为了排除两次提交AJAX请求的原因，我添加了整数i。但是，如果我向下滚动，i只等于1（如我的h1元素所述）。

AJAX success函数接收一个json对象（我可以在警报中看到），然后将其转换为html两次（相同的对象，因此相同的html）。你知道为什么会出现这个问题吗？

jQuery的：

function loadMore()
{
    var i = 0;
    var accountpar = $(".parent").length;

    $.ajax({
        url: 'homemore.php',
        type: 'post',
        data: {
            'account':accountpar
        },
        success: function(datanew) {
            i++;
            var datarec = datanew.replace(/},]$/,"}]");
            var string  = json2html.transform(datarec,template);
            alert(string);
            $(string).insertAfter($('.parent').last());
        }
    });
    $(window).bind('scroll', bindScroll);
}

function bindScroll(){
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        $(window).unbind('scroll');
        loadMore();
    }
}

$(window).scroll(bindScroll);

Answer 1

我会尝试这样的事情。我的感觉告诉我它'按像素捕捉'并且不止一次射击。您可以下载debounce / throttle插件并使用它，并将其设置为250，或尝试“一次方法”

如果使用去抖（必须下载插件）

我重新阅读你的帖子（更新后），你有两次绑定：曾经这样：

$(window).scroll(bindScroll);

再次像这样：

$（window）.bind（'scroll'，bindScroll）;

我觉得这是一面红旗。在重新阅读之后，我可能只是下载插件并将其包装在去抖动中（$（window）.scroll（bindScroll）;）。

$.debounce( 250, bindScroll )

而不是：

 $(window).bind('scroll', bindScroll);

试试这个：

$( window ).one( "scroll", function() {
     bindScroll()
});

Answer 2

尝试移动i++，如下所示

success: function(datanew) {
        $("h1").text(i);
        var datarec = datanew.replace(/},]$/,"}]");
        //alert(datarec);
        var string  = json2html.transform(datarec,template);
        $(string).insertAfter($('.parent').last());
        i++;
    }

Answer 3

而不是：

$(string).insertAfter($('.parent').last())

使用：

$('.parent').append($(string))

内容添加两次虽然只循环一次

3 个答案: