内容添加了两次，但只循环了一次答案

【问题标题】：Content added twice though only looped once内容添加了两次，但只循环了一次
【发布时间】：2016-04-02 06:51:43
【问题描述】：

我想使用 AJAX 向我的提要添加更多内容，它确实添加了内容 - 但它添加了两次。为了排除诸如 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);

【问题讨论】：

警告 var 字符串时会发生什么？也许它将字符串插入到多个 .parents 中？
@JamesG 警报只出现了两次。我认为这是因为滚动的原因......因为如果我真的很小心并一点一点向下滚动，警报只会显示一次，因此内容也只会添加一次......
@Moritz 你必须绑定滚动事件两次。你能告诉我们完整的代码吗？
@Moritz 如果这是完整的代码那么你什么时候第一次绑定滚动事件？它只在 loadMore 函数内部，没有其他地方。我错过了什么吗？
@Moritz 太棒了！！现在试试这个，删除bindScroll函数中的unbind行，同时删除loadMore中的bind行代码，现在试试。

标签： jquery ajax json2html

【解决方案1】：

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

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

我重新阅读了您的帖子（在您更新后），并且您绑定了两次：曾经这样：

$(window).scroll(bindScroll);

又是这样：

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

我觉得这是一个危险信号。重新阅读后，我可能只是下载插件并将其包装在 debounce ($(window).scroll(bindScroll);) 中。

$.debounce( 250, bindScroll )

而不是这个：

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

试试这个：

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

【讨论】：

很有趣，很高兴为您提供帮助。

【解决方案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++;
    }

【讨论】：

然后它只是在 h1 说 0
如果我将 h1 移到 i++ 下，它仍然显示 1

【解决方案3】：

代替：

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

用途：

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

【讨论】：

不，如果我没有记错的话，它会增加 10 个元素。