jQuery - 异步执行

我需要通过AJAX调用YouTube API来检索JSON格式的检索视频信息。jQuery - 异步执行

每个调用都可以同步处理，但是一旦所有数据都被接收到，它就需要被处理\显示。

如何确保在收到所有数据之前不会调用处理函数？我目前的解决方案是递归调用AJAX函数，但我觉得有更好的解决方案。

任何帮助将被大大提升。

var categoryWrapper,categories; 
    var catCnt=0; 

    function initialiseVideoLibrary() { 
     categories=new Array("health","hiv","education","volunteering"); 
     getYouTubeData(); 
    } 

    function getYouTubeData() { 

     ytJsonUrl = "https://gdata.youtube.com/feeds/api/users/vsomediauk/uploads/-/" + categories[catCnt] + "?v=2&alt=jsonc&max-results=5&orderby=relevance"; 

     $.ajax({ 
      type: "GET", 
      url: ytJsonUrl, 
      cache: false, 
      dataType:'jsonp', 
      success: function(ytJsonResponse){ 
       if (catCnt < categories.length) { 
       showCategory(categories[catCnt],ytJsonResponse); 
        getYouTubeData(); 
        catCnt++; 
       } else { 
        tabVideos(); 
       } 
      } 

     }); 
    } 

    function showCategory(cat,ytResponse) { 

     categoryWrapper = $('<div></div>').addClass('category'); 

     $(categoryWrapper).append($('<h3></h3>').text(cat)); 

     contentDiv = $('<div></div>').addClass('content'); 

     $.each(ytResponse.data.items,function(i,video) { 
      videoWrapper = $('<div></div>').addClass('video'); 
      $(videoWrapper).append($('<p></p>').text(video.id)); 
      $(videoWrapper).append($('<p></p>').text(video.title)); 
      $(videoWrapper).append($('<img></img>').attr('src',video.thumbnail.sqDefault)); 
      $(contentDiv).append(videoWrapper); 
     }); 

     $(categoryWrapper).append(contentDiv); 
     $("#videolist").append(categoryWrapper); 

    } 

    function tabVideos() { 
     $("#videolist").tabulation({tabAlignment : "right", titleTag : "h3", tabPosition : "top"}); 
    }

来源

2011-10-12 ratface

这将是一个很好的使用jQuery.Deferred。

只需将呼叫的返回值存储到jQuery.ajax，然后将它们传递给jQuery.when。

编辑：我只注意到它不是从文档显而易见的，我想我会THT注意，您可以使用下面的语法合格deferred秒的数组when：

$.when.apply(null, ajaxReturnValueArray).then(function() { 
    tabVideos(); // Assuming this is the method you wanted to call 
});

来源

2011-10-12 11:34:00 zjs

我不知道，但你可以用下面的变革尝试：（！对不起，未经测试）

function getYouTubeData() { 

    ytJsonUrl = "https://gdata.youtube.com/feeds/api/users/vsomediauk/uploads/-/" + categories[catCnt] + "?v=2&alt=jsonc&max-results=5&orderby=relevance"; 

    $.ajax({ 
     type: "GET", 
     url: ytJsonUrl, 
     cache: false, 
     async: false, 
     dataType:'jsonp', 
     success: function(ytJsonResponse){ 
      if (catCnt < categories.length) { 
      showCategory(categories[catCnt],ytJsonResponse); 
       getYouTubeData(); 
       catCnt++; 
      } else { 
       tabVideos(); 
      } 
     } 

    }); 
}

来源

2011-10-12 11:21:41

退房.ajaxStop()，这样的事情可能会奏效

var categoryWrapper,categories; 

function initialiseVideoLibrary() { 
    categories=new Array("health","hiv","education","volunteering"); 
    getYouTubeData(); 
} 

function getYouTubeData() { 

     $.each(categories, function(index, value) { 
      ytJsonUrl = "https://gdata.youtube.com/feeds/api/users/vsomediauk/uploads/-/" + value + "?v=2&alt=jsonc&max-results=5&orderby=relevance"; 

      $.ajax({ 
       type: "GET", 
       url: ytJsonUrl, 
       cache: false, 
       dataType:'jsonp', 
       success: function(ytJsonResponse){ 
        showCategory(value,ytJsonResponse); 
       } 

      }); 
     }); 
} 

function showCategory(cat,ytResponse) { 

    categoryWrapper = $('<div></div>').addClass('category'); 

    $(categoryWrapper).append($('<h3></h3>').text(cat)); 

    contentDiv = $('<div></div>').addClass('content'); 

    $.each(ytResponse.data.items,function(i,video) { 
     videoWrapper = $('<div></div>').addClass('video'); 
     $(videoWrapper).append($('<p></p>').text(video.id)); 
     $(videoWrapper).append($('<p></p>').text(video.title)); 
     $(videoWrapper).append($('<img></img>').attr('src',video.thumbnail.sqDefault)); 
     $(contentDiv).append(videoWrapper); 
    }); 

    $(categoryWrapper).append(contentDiv); 
    $("#videolist").append(categoryWrapper); 
} 

$("#videolist").ajaxStop(function() { 
    $(this).tabulation({tabAlignment : "right", titleTag : "h3", tabPosition : "top"}); 
});

来源

2011-10-12 11:31:55

我想最简洁的方法是让ajax调用同步，然后在for循环中顺序调用getYouTubeData（）。

的getYouTubeData（）应该是：

function getYouTubeData(cat) { 

    ytJsonUrl = "https://gdata.youtube.com/feeds/api/users/vsomediauk/uploads/-/" +cat+ "?v=2&alt=jsonc&max-results=5&orderby=relevance"; 

    $.ajax({ 
     type: "GET", 
     url: ytJsonUrl, 
     cache: false, 
     async: false, //this is to make tha ajax call synchronous 
     dataType:'jsonp', 
     success: function(ytJsonResponse){ 
      showCategory(cat,ytJsonResponse); 
     } 
    }); 
}

你可以调用它像：

for (var iC = 0; iC < categories.length; iC++){ 
    getYouTubeData(categories[iC]); 
} 
tabVideos();

这样的tabVideos（）将到getYouTubeData所有呼叫后调用（）已经完成。

来源

2011-10-12 11:55:35 sikrip

jQuery - 异步执行

回答

相关问题