Question

我有这小段代码

JS

function insertDataIntoTable(jsonUrl, Id) {
    var obj;
    $.getJSON(jsonUrl, function(data){
        console.log("1: "+data.elem[Id]);  //outputs the correct object
        obj= data.elem[Id];
        console.log("2: "+obj);            //still is correct
    });
    console.log("3: "+obj);                //now it logs "undefined"
}

表示格式正确的JSON，如果没有必要，则不想发布。我希望无论如何都能帮助我。

Answer 1

function insertDataIntoTable(jsonUrl, Id) {
var obj;
var callback = function(){
    console.log("3: "+obj);                //now it logs "undefined"
}
$.getJSON(jsonUrl, function(data){
    console.log("1: "+data.elem[Id]);  //outputs the correct object
    obj= data.elem[Id];
    console.log("2: "+obj);            //still is correct
    callback();
});
}

Answer 2

这是因为$.getJSON本质上是异步的。因此，调用insertDataIntoTable方法时，它将在以下步骤中执行。

定义var obj;
使用jsonUrl对您的$.getJSON进行ajax调用
console.log("3: "+obj);在这里，您的obj将是undefined 因为它尚未定义任何值
执行ajax调用的成功/失败回调（使用$.getJSON），其中您获得console.log("1: "+data.elem[Id]);和console.log("2: "+obj);绝对正确

您的代码没有错。

如果要使以上代码同步，则可以通过以下方法进行：

1）使用 $.ajax 使用 async:false

function insertDataIntoTable(jsonUrl, Id) {
    var obj;
    $.ajax({
      dataType: "json",
      url: jsonUrl,
      data: data,
      async: false,
      success: function(data) {
        obj = data.elem[Id]
      }
    });
    console.log(obj);
  }

2）。如果您使用 es6 或更高，请使用 async 和 await

let insertDataIntoTable = async (jsonUrl, Id) => {
    let obj;
    let data = await $.getJSON(jsonUrl);
    obj = data.elem[Id];
  }

局部函数完成后，全局变量失去其值

2 个答案: