Javascript 使用jQuery append/html更新div

我从一个外部JSON文件中获取数据，每个文件都使用jQuery循环，然后输出到HTML

由于JSON数据经常更新，我还希望每隔一分钟左右更新这些div中的HTML。我一直在阅读这篇文章，并且明白实现这一点的最简单方法是使用html（）而不是append（）。这对我不起作用，因为它只输出循环中的最后一个div

使用append时，它会输出我所有的div，但是，当然，当脚本再次运行时，它们会继续堆叠。我尝试过在做任何其他事情之前清除附加的div来解决这个问题，但这会导致可怕的闪烁

有什么办法解决这个问题吗

下面是我的empty（）变通方法的代码

<div class="content lounge-content"></div>

<script type="text/javascript">
function repeat(){
    $('.lounge-content').empty();
    $.getJSON('https://api.import.io/store/data/dde648b1-fae1-49c1-a4b8-a084e34119fd/_query?input/webpage/url=http%3A%2F%2Fcsgolounge.com%2F&_user=213e76f7-c31e-4e56-bd2f-b7463aa8df8e&_apikey=213e76f7c31e4e56bd2fb7463aa8df8e4d47f273f4f49901a03092c93455f74df3cb1f165c675c467e69380c0f2fcac66cbbe5db7e92a0764d915fc8ab62f46a64e1298b3514ce2c2d6fd43f211f91a7', function(data) 
    {
        $.each(data.results, function(key, val) {
            $(".lounge-content").append('<a href="'+val.MATCH_LINK+'" target="_blank"><div class="lounge-item"><p>'+val.whenm_text+'</p><h3>'+val.team1+'</h3><span>'+val.team1_percent+'</span><p> - </p><span>'+val.team2_percent+' </span><h3>'+val.team2+'</h3><p>'+val.best_of+', '+val.EVENTM_TEXT+'</p></div></a><hr>');
        })
    });
}

setInterval(repeat, 5000);
</script>

函数重复（）{
$（'.lounge content'）.empty（）；
$.getJSON('https://api.import.io/store/data/dde648b1-fae1-49c1-a4b8-a084e34119fd/_query?input/webpage/url=http%3A%2F%2Fcsgolounge.com%2F&_user=213e76f7-c31e-4e56-bd2f-b7463aa8df8e&_apikey=213E76F7C31E4E56BD2FB7463AA8DF8E4D47F273F4F4901A00392C93455F74DF3CB1F165C675C467E69380C0F2FCAC66CBBE5D7E92A0764D915FC8AB62F4664E1298B35414CE2C2D6FD43F211F91A7'，'功能n（数据）
{
$.each（数据、结果、函数（键、值）{
$（“.lounge content”）.append（“
”）；
})
});
}
设置间隔（重复，5000）；

您应该在获取json数据后清空html部分

function repeat(){
  $.getJSON('url', function(data) {
      $('.lounge-content').empty();
      $.each(data.results, function(key, val) {
        $(".lounge-content").append('thing');
    })
  });
}

构造整个HTML的一个“长”字符串，并将其设置为HTML属性：

function repeat() {
    $.getJSON('https://api.import.io/store/...', function(data) {
        var longHTML = '';
        $.each(data.results, function(key, val) {
            longHTML += '<a href="'+val.MATCH_LINK+'" target="_blank"><div class="lounge-item"><p>'+val.whenm_text+'...';
        });
        $(".lounge-content").html(longHTML);
    });
}

setInterval(repeat, 5000);

函数重复（）{
$.getJSON（'https://api.import.io/store/...，函数（数据）{
var longHTML=''；
$.each（数据、结果、函数（键、值）{
longHTML+=''+val.whenm_text+'…'；
});
$（“.lounge content”）.html（longHTML）；
});
}
设置间隔（重复，5000）；

---

作为额外的“奖金”，您将获得更高的性能，因为操作字符串比操作DOM快得多。

如果闪烁没有用下面的解决方案解决，您可以尝试设置动画。是的，@Gothdo，我想有人会对此发表评论。我只想在测试时使用更短的时间间隔，这样我就可以看到闪烁是否消失了，而不需要修改在每个间隔之间等待一分钟。是的，这将有助于消除闪烁，但Amit的回答更好。Op已经给了

append（）

一个大的html字符串。这有什么不同？“long”和“big”是相对的形容词。字符串是（或不是）long仅用于与另一个字符串的比较。在本例中，它比问题中使用的字符串长。尽管如此，字符串的长度与答案无关。事实上，使用单个调用来设置整个html是很重要的，要做到这一点，首先必须将多个字符串连接到一个sin我的意思是，如果你是你，你和OP都在使用字符串，而不是一个比另一个长：）@Mikey-sooo。。我不明白你的评论。关于我的回答，你有什么重要的话要说吗？你觉得很难理解吗？你认为这有什么不对吗？不，伙计，我明白你在做什么，我的评论中没有任何批评。你显然没有得到消息。我刚刚对append方法也将字符串作为参数做了一个评论，它看起来像是你在关注字符串部分，但它的归纳才是区别。我知道我不需要向你解释，但我只是想让你明白。。。