Question

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

输出：
NAME1
NAME2
NAME1
NAME2
NAME1
NAME2
（到无限......）

<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; + ""; 
});
};

Answer 1

这种情况正在发生，因为您每3秒钟读取一次JSON文件并将其附加到已经渲染的（包含先前运行中附加的所有数据）列表

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

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

例如： $（ '＃列表'）空（）;

或者，您需要跟踪已添加到列表中的内容，并仅附加新条目，但如果您呈现的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; + ""; 
});
};

Answer 2

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

var obj = JSON.parse(response);

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

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

}

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

如何使用setInterval在for循环中附加jquery，而不会获得无限循环

2 个答案: