jQuery - 異步執行

Question

我需要通過AJAX調用YouTube API來檢索JSON格式的檢索視頻信息。

每個調用都可以同步處理，但是一旦所有數據都被接收到，它就需要被處理\顯示。

如何確保在收到所有數據之前不會調用處理函數？我目前的解決方案是遞歸調用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"}); 
    } 

Answer 1

這將是一個很好的使用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 
}); 

Answer 2

我不知道，但你可以用下面的變革嘗試：（！對不起，未經測試）

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(); 
      } 
     } 

    }); 
} 

Answer 3

退房.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"}); 
}); 

Answer 4

我想最簡潔的方法是讓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所有呼叫後調用（）已經完成。