javascript - 无法存储使用 jQuery JSONP 获取的数据

Question

我正在尝试使用 JSONP 通过 jQuery AJAX 调用从 Flickr 获取大量照片数据，但我不想立即使用这些数据。相反，我想保留它以备后用。在复杂的情况下，我想让用户对预取的数据执行不同的查询。在更简单的情况下，我只想在用户每次单击按钮时加载接下来的 n 个图像。

现在，我只测试下面最基本的功能，这些功能改编自这个问题的最佳答案:JQuery - Storing ajax response into global variable

但是，检索到的 JSON 数据并未按应有的方式存储在 jsonData 变量中。我将警报语句调试，奇怪的是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

...and the strange thing is that the getData() alert is triggered before the alert in the callback function. Why is this happening?

因为一般的 ajax 调用在默认情况下是异步 — 而 JSONP 调用本质上总是异步的(其他类型的 ajax 调用可以同步，但这通常不是一个好主意)。

这意味着你的

var stuff= dataStore.getData();

行在 JSONP 请求完成之前执行。这也是它在 jsonData 中看不到任何内容的原因。

您需要将 JSONP 调用结果的任何处理转移到从请求的 success 回调调用的内容中。