將兩個Feed合併爲一個

Question

因此，我有一個Materialise基於CSS的網站。 Materialise CSS是一個CSS庫，可在此處獲得，link。

現在，我設法顯示我的博客飼料分爲兩列，第一行，然後是第二行。

------------------------ 
Newest  | 4th Newest 
2nd Newest | 5th Newest 
3rd Newest | 6th Newest 
------------------------ 

這是上面使用的代碼。

<div class="row"> 
    <div id="firstColumnBlog" class="col s6"></div> 
    <div id="secondColumnBlog" class="col s6"></div> 
</div> 
<script> 
$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "http://www.foxinflame.tk/blog/feed/", 
     dataType: "xml", 
     success: function (xml) { 
      $(xml).find("item").each(function (eachCounter) { 
       var title = $(this).find("title").text(); 
       var description = $(this).find("description").text(); 
       var comments = +($(this).find("slash:comments").text()); 
       var pubDate = $(this).find("pubDate").text(); 
       var link = $(this).find("link").text(); 
       if(eachCounter < 3){ 
        $("#firstColumnBlog").append("<div class='postCollection'><div class='z-depth-1 blogpost' style='min-height: 300px'><br><h5><a style='color:black' href='"+link+"'>"+title+"</a></h5><br><p>"+description+"<br><i>"+comments+" Comments. Published at "+pubDate+"</i></p></div></div>"); 
       } else if(eachCounter < 6) { 
        $("#secondColumnBlog").append("<div class='postCollection'><div class='z-depth-1 blogpost' style='min-height: 300px'><br><h5><a style='color:black' href='"+link+"'>"+title+"</a></h5><p>"+description+"<br><i>"+comments+" Comments. Published at "+pubDate+"</i></p></div></div>"); 
       } 
      }); 
     } 
    }); 
    }) 
</script> 

現在，我想添加在另一個feed中，以當前顯示的方式顯示。比方說，YouTube視頻供稿。它需要按照正確的時間順序顯示在相同的兩列中，兩個Feed都是混合的。

我該怎麼做？

Answer 1

首先結合兩個數據流，使用$.when。

對$.ajax的調用返回所謂的Promises或Deferred對象。您不需要提供成功功能，而是通過$.ajax呼叫鏈接done方法。

$.ajax({ 
    type: "GET", 
    url: "http://www.foxinflame.tk/blog/feed/", 
    dataType: "xml" 
}).done(function(xml) { 
    // do stuff with xml 
}); 

它可以組合兩個函數

var blogFeed = $.ajax({ /* some settings */ }); 
var videoFeed = $.ajax({ /* some other settings */ }); 

$.when(blogFeed, videoFeed) 
    .done(function(blogXML, videoXML) { 
    // this will be called when both AJAX requests are successful 
    }); 

當你到了這一點，你可以簡單地用一個自定義的排序功能，同時結合了飼料和排序。

var combined = blogXML.find('item').concat(videoXML.find('item')); 

var sorted = combined.sort(function(a, b) { 
    // not all date formats can be compared like this 
    // but I don't know what format your dates are in 
    var dateA = Date.parse(a.find('pubDate')); 
    var dateB = Date.parse(b.find('pubDate')); 
    return dateB - dateA; 
}); 

sorted.forEach(function(item, index) { 
    // do something with each item 
    // (this will probably involve inserting them into the DOM) 
});