Javascript Can'；t存储使用jQuery JSONP获取的数据

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

现在，我正在测试下面最基本的功能，这是根据这个问题的最佳答案改编的：

但是，检索到的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;
});

var数据存储=（函数（）{
var jsonData；
$.ajax({
键入：“获取”，
url:“http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
数据类型：“json”，
数据：{
标签：“狗”，
tagmode:“任何”，
格式：“json”
},
成功：功能（数据）{
jsonData=数据；
警报（jsonData）；
}
});
返回{getData:function（）
{
如果（jsonData）返回jsonData；
else警报（“无数据！”）；
}};
})();
var stuff=dataStore.getData（）；
$.each（stuff.items，function（i，item）{
$("
…奇怪的是，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;
});

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

这意味着你的

var stuff= dataStore.getData();

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

您需要将JSONP调用结果的任何处理移动到从请求的
成功
回调调用的内容中。
问题是
填充
在
$时是
未定义的
。每个
运行都是因为
填充
尚未完成运行。所有内容都需要在回调中。有许多解决这个问题的方法有：最丑陋、最老套的方法是执行
setInterval（）
，检查
stuff===未定义的
，如果没有，则执行
$。每个
都使用一种更自然的方法，即只使用回调

就个人而言，我强烈建议您更有效地使用回调。以下是我要做的。这应该会让您走上正确的轨道。显然，这其中很多都是伪造代码，但可以根据您的需要轻松修改

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

var cachedImageData={}；//检查搜索项是否存在数据
var displayImages=函数（stuff）{
$.each（stuff.items，function（i，item）{
$（“关于堆栈溢出，最好在这里的每个问题中问一个问题。在上面，您要问两个截然不同的问题：1）为什么您的代码没有按预期工作，以及分别问2）你应该这样做还是隐藏图片。合并问题会降低问题及其答案的质量，最好将它们分开。我明白了，谢谢你的提示。我应该现在就分开吗？事实发生后？
@stchangg
：我可能会，是的。因为这里的另一个答案解决了“为什么这段代码不能正常工作”的问题在这方面，我会把这部分放在这里，单独问图像最佳实践问题。我可以复制我的答案中与此相关的部分。很酷，在这里提取出另一个问题：谢谢！我希望我可以投票，但我还没有足够的代表分数。谢谢你的回答。但是…cachedImageData添加到哪里？更新。你是一旦你得到数据，我就保存。