javascript - 无法在jQuery的getJSON数据函数中将对象添加到Array(范围问题)

我有一个person对象，并想将其存储到我创建的全局ArrayCollection中。
在正常范围内效果很好：

var s = new ArrayCollection();
s.add(new person("Knud", "Mikkelsen", 35));

问题是当我想在我的jQuery函数“ mainFunction”中添加人员时。

我似乎无法正确解决。我知道这与范围有关，我必须在ArrayCollection之类的函数中包装一些东西。
请帮助我-非常感谢。

function ArrayCollection() {
 var myArray = new Array;
 return {
  empty: function () {
   myArray.splice(0, myArray.length);
  },
  add: function (myElement) {
   myArray.push(myElement);
  },
  getAll: function () {
   return myArray;
  }
 }
}

function person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = parseInt(parseFloat(age));
}

function mainFunction() {
 //....
 var s = new ArrayCollection();
 s.add(new person("Knud", "Mikkelsen", 35));

 $.getJSON(url, function (data) {
  for (var x = 0; x < data.length; x++) {

   var myPerson = new person(data[x].FirstName.toString(), data[x].LastName.toString(), data[x].Age.toString());
   s.add(myPerson);
  }
 });

 alert(drawArray(s.getAll()));
}

function drawArray(myArray) {
 var v = "";
 for (var i = 0; i < myArray.length; i++) {
  v += myArray[i].firstName + " " + myArray[i].lastName + " (" + myArray[i].age + ")\n";
 }
 return v;
}

最佳答案

我在那里没有看到示波器问题。 getJSON的成功函数是在mainFunction中定义的，因此可以访问s。 mainFunction被定义为person的对等方，因此可以访问它。

我看到一个同步/异步问题。这是mainFunction的执行顺序：


创建一个新的ArrayCollection。
在其中添加一个名为Knud Mikkelsen的人
通过$.getJSON发起数据请求。
警报显示ArrayCollection中有一个人（Knud Mikkelsen）
返回
在将来的某个时刻，getJSON调用完成，并将人员对象添加到ArrayCollection


这是因为默认情况下getJSON是异步的-它在将来的某个时刻完成，而不是与启动它的代码同步。这是一件好事，因为同步Ajax调用会完全锁定浏览器UI，并带来糟糕的用户体验。

实际看到Ajax调用返回的那个人的选项是将警报移到getJSON成功处理程序内，和/或将回调传递给mainFunction，该回调由getJSON完成函数触发，和/或者将ArrayCollection添加到mainFunction中，然后稍后在程序流程中检查是否有新的对象。

这里有几个选项供您选择：

只需将alert移动到getJSON完成功能内即可：

function mainFunction() {
    //....
    var s = new ArrayCollection();
    s.add(new person("Knud", "Mikkelsen", 35));

    $.getJSON(url, function (data) {
        for (var x = 0; x < data.length; x++) {
            var myPerson = new person(data[x].FirstName.toString(), data[x].LastName.toString(), data[x].Age.toString());
            s.add(myPerson);
        }
        alert(drawArray(s.getAll())); // <== moved this into the completion function
    });
}

或使用回调：

function mainFunction(callback) {
    //....
    var s = new ArrayCollection();
    s.add(new person("Knud", "Mikkelsen", 35));

    $.getJSON(url, function (data) {
        for (var x = 0; x < data.length; x++) {
            var myPerson = new person(data[x].FirstName.toString(), data[x].LastName.toString(), data[x].Age.toString());
            s.add(myPerson);
        }
        callback(s);                // <== Trigger callback, passing in the collection
    });
}

function mainFunctionCallback(s) {
    alert(drawArray(s.getAll()));   // <== Moved out of `mainFunction` entirely
}

// Usage:
mainFunction(mainFunctionCallback);

关于javascript - 无法在jQuery的getJSON数据函数中将对象添加到Array(范围问题)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2779537/