javascript - 将 json 数据存储在代理模式内的变量中

Question

我有这个代码:

var my = {};

(function () { 
    var self = this;
    this.sampleData = { };

    this.loadData = function() {
       $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', 
          {tags: "cat", tagmode: "any", format: "json"},
          function(data){
             self.sampleData = data;
          }
       );
    };
}).apply(my);

my.loadData();
console.log(my.sampleData); // {}

问题是 my.sampleData 没有任何内容。

在这里尝试这个示例:http://jsfiddle.net/r57ML/

Answer 1

原因是 getJSON 调用是异步，因此您要在返回数据之前查找数据。相反，请直接或间接地将使用数据的代码放入回调内部。

例如，您可以让您的 loadData 调用接受回调:

var my = {};

(function () { 
    var self = this;
    this.sampleData = { };

    this.loadData = function(callback) {
       $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', 
          {tags: "cat", tagmode: "any", format: "json"},
          function(data){
             self.sampleData = data;
             callback(); // <==== Call the callback
          }
       );
    };
}).apply(my);

my.loadData(function() { // <=== Pass in a callback
    console.log(my.sampleData); // Now the data is htere
});

<小时/>

旁注:由于您的 my 对象是单例，因此您可以稍微简化该代码，无需 apply、this或 self，因为您的匿名函数是定义 my 的上下文的闭包:

var my = {};

(function () { 
    my.sampleData = { };

    my.loadData = function(callback) {
       $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', 
          {tags: "cat", tagmode: "any", format: "json"},
          function(data){
             my.sampleData = data;
             callback();
          }
       );
    };
})();

my.loadData(function() {
    console.log(my.sampleData); // Now the data is htere
});

当然，如果您使用构造函数或其他函数(您不在引用的代码中，但是......)，那么您当然可能需要更复杂的结构。