无法在 jQuery 的 getJSON 数据函数中将对象添加到数组（范围问题）

Question

我有一个 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;
}

Answer 1

我没有看到范围问题。 getJSON 的成功函数在 mainFunction 中定义，因此可以访问 s。 mainFunction 被定义为 person 的对等体，因此可以访问它。

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

1. 创建一个新的ArrayCollection。
2. 向其中添加一个名为 Knud Mikkelsen 的人
3. 通过$.getJSON发起数据请求。
4. 在ArrayCollection (Knud Mikkelsen) 中显示一个人的警报
5. 返回
6. 在未来的某个时刻，getJSON 调用完成并将人员对象添加到 ArrayCollection

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

实际看到 Ajax 调用返回的那个人的选项是将警报移动到 getJSON 成功处理程序中，和/或将回调传递给由 getJSON 完成函数触发的 mainFunction , 和/或传递 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);