使用jquery + bootstrap进行不恒定的面板放置

Question

我正在构建一个自定义RSS仪表板，我正在迭代一系列供稿并将它们投入到Google服务中。

但是当我看到我的面板时，它们并不是一致的。

代码：

JQuery的

 var rssArray = [
  'https://blog.malwarebytes.org/feed/',
  'http://krebsonsecurity.com/feed/',
  'http://motherboard.vice.com/rss?trk_source=motherboard',
  'https://www.trustwave.com/rss.aspx?type=twblog',
  'http://threatpost.com/feed/',
  'https://news.ycombinator.com/rss',
  'http://feeds.trendmicro.com/TrendMicroSimplySecurity?format=xml',
  'https://securityintelligence.com/topics/vulnerabilities-threats/feed/',
  'https://securityintelligence.com/topics/x-force/feed/'
]
   for (var i=0; i < rssArray.length; i++){
     $.ajax({
       url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' + encodeURIComponent(rssArray[i]),
       dataType: 'json',
       success: function(data) {
        //  console.log(data)
         var feedBody = $('<div>', {class: 'panel-body'})
         var feedHead = $('<div>', {class: 'panel-heading', html: '<h3 class="panel-title text-center">'+capitaliseFirstLetter(data.responseData.feed.title)+'</h3>'})
         var contentHolder = $('<ul>', {class: 'list-group'})
         var feed = $('<div>', {class: 'col-xs-6 col-md-4 panel panel-warning'}).append(feedHead).append(feedBody).append(contentHolder)
         $.each(data.responseData.feed.entries, function(key, value){
           if (value.contentSnippet === "Comments"){
             var thehtml = '<a href="'+value.link+'" target="_blank" class="list-group-item"><h5 class="list-group-item-heading">'+value.title+'</h5></a>';
           } else {
             var thehtml = '<a href="'+value.link+'" target="_blank" class="list-group-item"><h5 class="list-group-item-heading">'+value.title+'</h5><p class="list-group-item-text">'+value.contentSnippet+'</p></a>';
           }
           feedBody.append(thehtml)
         });
        $("#content").append(feed)
       }
    })
 }

HTML

  <div class="row">
    <div id="content">
    </div>
  </div>

问题的例子：

Answer 1

您正在开始一系列AJAX通话，会在未知的时间内执行。当他们完成时，他们会称他们成功回调。

如果第一个请求需要5秒，但第三个请求需要2，则第三个请求将在第一个请求之前呈现。

如果您需要确保在呈现内容之前已完成这些请求，请使用$.when创建承诺（实际延迟jQuery）并在解析后呈现所有数据。