無法存儲使用jQuery JSONP獲取的數據

Question

我試圖通過使用JSONP的jQuery AJAX調用從Flickr獲取一堆照片數據，但我不想立即使用這些數據。 相反，我想保留它以供日后使用。 在一個復雜的情況下，我想讓用戶對預取的數據執行不同的查詢。 在更簡單的情況下，我想在每次用戶單擊按鈕時加載下n個圖像。

現在，我正在測試下面最基本的功能，它是根據這個問題的最佳答案改編的： JQuery - 將ajax響應存儲到全局變量中

但是，檢索到的JSON數據不會存儲在jsonData變量中。 我將alert語句調試，奇怪的是getData（）警報是在回調函數中的警報之前觸發的。 為什么會這樣？

var dataStore = ( function() {
  var jsonData;

  $.ajax({
    type: "GET",
    url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
    dataType: "json",
    data: {
      tags: "dog",
      tagmode: "any",
      format: "json"
    },
    success: function(data) {
      jsonData = data;
      alert(jsonData);
    }
  });

  return { getData : function()
  {
      if (jsonData) return jsonData;
      else alert("no data!");
  }};
})();

var stuff = dataStore.getData();

$.each(stuff.items, function(i,item) {
  $("<img/>").attr("src", item.media.m).appendTo("#images");
  if ( i == 3 ) return false;
});

Answer 1

...而奇怪的是，在回調函數中的警報之前觸發了getData（）警報。 為什么會這樣？

因為默認情況下ajax調用是異步的 - 而且JSONP調用本質上總是異步的（其他類型的ajax調用可以同步，但通常是個壞主意）。

這意味着你的

var stuff= dataStore.getData();

line在JSONP請求完成之前執行。 這也是它在jsonData不到任何內容的jsonData 。

您需要將JSONP調用結果的任何處理移動到從請求的success回調調用的內容中。

Answer 2

問題是當$.each運行時， stuff是undefined ，因為stuff還沒有運行完畢。 一切都需要回調。 有很多方法可以解決這個問題，從最丑陋的hacky做一個setInterval()來檢查是否有stuff === undefined ，如果沒有，那么它會將$.each用於更簡單地使用回調的JS本機方式。

就個人而言，我強烈建議您更有效地使用回調。 這就是我要做的。 這應該會讓你走上正軌。 顯然，很多這是人工碼，但很容易根據您的需求進行修改。

var cachedImageData = {}; //To check if data exists for the search term

var displayImages = function(stuff){
  $.each(stuff.items, function(i,item) {
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
}

$('button').bind('click',function(){ //Triggers the ajax...
  if(cachedImageData[$('input').val()] === undefined){ //If this search doesn't exist...
    $.ajax({
      url:''
      data:{ tag: $('input').val() }, //Get the value however
      success: function(data){
        cachedImageData[$('input').val()] = data; //Save for later
        displayImages(data); //Run the display images function which is your $.each()
      }
    });
  }
});