如何使用 setInterval 在 for 循环中追加 jquery 而不会出现无限循环答案

【问题标题】：How append in jquery in for loop with setInterval without getting an infinite loop如何使用 setInterval 在 for 循环中追加 jquery 而不会出现无限循环
【发布时间】：2016-09-20 00:29:25
【问题描述】：

我正在创建一个列表系统，通过将 response.list[i].firstname 附加到 document.getElementById，每 3 秒 更新检查来自 json 文件的新数据（“列表”）。但我得到了无限循环。

输出：
名称1
名称2
名称1
名称2
名称1
名称2
（到无穷大……）

<script>
list();
setInterval(list, 3000);
function list() {
$.getJSON('list.php',function(response){
        for(var i = 0; i < response.list_count; i++){
        var newElement = document.createElement('div');
        newElement.innerHTML = response.list[i].firstname;
        document.getElementById("list").appendChild(newElement);
        }
    document.getElementById("list_count").innerHTML = "" +  response.list_count; + ""; 
});
};

【问题讨论】：

标签： javascript jquery json

【解决方案1】：

这是因为您每 3 秒读取一次 JSON 文件并将其附加到已经渲染的（所有数据都附加在之前的运行中）列表中

document.getElementById("list").appendChild(newElement);

如果您只想显示一次文件的内容，那么您应该使用此处描述的方法之一清理目标列表 div： Remove all child elements of a DOM node in JavaScript

例如： $('#list').empty();

或者，您需要跟踪已添加到列表中的内容，并仅附加新条目，但如果您呈现的 json 数据中没有唯一标识符，这可能会有点棘手。

因此，第一个解决方案将类似于：

list();
setInterval(list, 3000);
function list() {
$.getJSON('list.php',function(response){
        $('#list').empty();
        for(var i = 0; i < response.list_count; i++){
        var newElement = document.createElement('div');
        newElement.innerHTML = response.list[i].firstname;
        document.getElementById("list").appendChild(newElement);
        }
    document.getElementById("list_count").innerHTML = "" +  response.list_count; + ""; 
});
};

【讨论】：

感谢您的回答。无限循环消失了。 :)

【解决方案2】：

我已经分享了如何获取 JSON 响应的长度。

var obj = JSON.parse(response);

var limit=Object.keys(obj).length;

for( var i = 0; i < limit; i++ ) {

}

我不确定响应。list_count 您正在使用。这是一个有限的数字吗？

【讨论】：

list_count 是数据库中的行数。如果我在数据库中有 2 个名称，例如 (name1, name2) list_count = 2;