javascript - 如何使用setInterval在for循环中追加jquery而不产生无限循环

Question

我正在制作一个列表系统，通过将 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; + ""; 
});
};

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