我从一个外部JSON文件中获取数据,每次使用jQuery循环并输出到HTML。使用jQuery附件更新div div/html
由于JSON数据经常更新,我还希望每隔一分钟左右更新这些div中的HTML。我一直在阅读这篇文章,并明白最简单的方法是使用html()而不是append()。这对我不起作用,因为它只输出循环中的最后一个div。
随着附加它输出所有我的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>
如果使用下面的解决方案不能解决闪烁问题,则可尝试进行动画制作。 – Michelangelo
是的,@Gothdo,我想有人会对此发表评论。我只是想在测试时使用更短的时间间隔,以便我可以查看闪烁是否消失,而不必在每个间隔之间等待一分钟。 – Lehar001