javascript - 循环遍历多个 JSON 请求(YouTube 数据 API)

Question

我正在处理的网站的一部分是视频页面。我正在通过访问 YouTube 数据 API 从 YouTube 帐户中提取视频。不按特定顺序抓取视频并且不进行排序效果很好，但是当我尝试将它们分类时，我开始遇到麻烦。假设有三个类别，水果、蔬菜、宠物。我不想一次抓取所有视频，而是想抓取所有标记为 Fruit 的视频，将它们附加到 <ul id="Fruit"> 中。 .然后请求所有带有 Vegetable 等标签的视频。

开始时，当浏览器完成获取请求并附加适当的列表时，我会收到浏览器警报。在我取消警报后，它仍然有效，但不是我预期的那样。要么循环推进得太快，要么根本没有推进，但我似乎无法发现错误。最终发生的是所有视频都被放入一个列表中，<ul id="Vegetable"> .

请注意:我正在使用一个名为 jGFeed 的插件，它包装了 jQuery getJSON 函数，所以我相信您可以这样对待它。

 var videoCategories = ['Fruit', 'Vegetable', 'Pets'];

 for (var i = 0; i < videoCategories.length; i++) {
    var thisCategory = videoCategories[i];
    $.jGFeed('http://gdata.youtube.com/feeds/api/users/username/uploads?category='+thisCategory,
    //Do something with the returned data
    function(feeds) {
       // Check for errors
       if(!feeds) {
         return false;
       } else {
         for(var j=0; j < feeds.entries.length(); j++) {
            var entry = feeds.entries[i];
            var videoUrl = entry.link;
            $('ul#'+thisCategory).append('<li><a href="#" id="'+videoUrl+'">'+entry.title+'</a></li>');
         }
       });
 }

Answer 1

问题是，您正在使用“thisCategory”变量来设置类别名称。问题是，如果这个变量的值在您等待服务器响应时发生变化。

您可以尝试将整个脚本放在一个函数中:

var videoCategories = ['Fruit', 'Vegetable', 'Pets'];

for (var i = 0; i < videoCategories.length; i++) {
    getCategory(videoCategories[i]);
}

function getCategory(thisCategory)
{

    $.jGFeed('http://gdata.youtube.com/feeds/api/users/username/uploads?category='+thisCategory,
    //Do something with the returned data
    function(feeds) {
       // Check for errors
       if(!feeds) {
         return false;
       } else {
         for(var j=0; j < feeds.entries.length(); j++) {
            var entry = feeds.entries[i];
            var videoUrl = entry.link;
            $('ul#'+thisCategory).append('<li><a href="#" id="'+videoUrl+'">'+entry.title+'</a></li>');
         }
       });
 }

我还没有测试过这个，所以我不确定它是否有效..