使用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

回答

相關問題