使用jQuery附件更新div div/html

我从一个外部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>

来源

2015-08-15 Lehar001

如果使用下面的解决方案不能解决闪烁问题，则可尝试进行动画制作。 – Michelangelo

是的，@Gothdo，我想有人会对此发表评论。我只是想在测试时使用更短的时间间隔，以便我可以查看闪烁是否消失，而不必在每个间隔之间等待一分钟。 – Lehar001

构造一个整个HTML的 “长” 的字符串后清空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);

作为一个额外的“奖励”，你会得到改进的性能，因为操纵字符串比操纵DOM要快得多。

来源

2015-08-15 23:07:52 Amit

Op已经给出了'append（）'一个很大的html字符串。这有什么不同？ – Michelangelo

“长”和“大”是相对形容词。一个字符串（或者不是）只与另一个字符串相比较长。在这种情况下，它比问题中使用的长*。说了这么多，字符串的长度与答案无关。事实上，使用单个调用来设置整个html ***是这里的重要事情，为了做到这一点，首先必须将多个字符串连接成单个更长的字符串 – Amit

没有我的观点是它你是你和OP是使用字符串不是那个比另一个长:) – Michelangelo

您应该获取JSON数据

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

来源

2015-08-15 23:07:03

我不知道这是否有助于闪烁 – Michelangelo

是的，这将有助于闪烁，但阿米特的答案更好。 –

使用jQuery附件更新div div/html

回答

相关问题