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

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

Answer 2

(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;
                 console.log(my.sampleData); // you get sample data after ajax response
              },
           'json');
        };
    }).apply(my);

    my.loadData();