AJAX 异步调用——不能用回调返回数据？

Question

我下面有这段代码，我想在ajax调用的成功函数中返回数据。当然，如果我执行 async:false 并直接返回它，我会得到它，但我不想这样做。

如果我像现在这样运行它，信息变量是未定义的（如果我执行 async:false，它会获取信息，所以问题不是数据的内容）。

我只是不明白为什么它不起作用，我用谷歌搜索了回调函数，看来我做得对......

function PUT_updateSystem(id) {
    var system= {};
    system= getSystemInformation(name, function(data){
                                var system = data;
                                return system;});

    var information = system.info;

}
// Returns system information
function getSystemInformation(name,callback){
    $.ajax({
        type:"GET",
        url: getUrl(),
        cache: false,
        dataType: "json",
        success: function(data){
            callback(data);
        }
    });
}

编辑： 将我的代码更改为我目前拥有的代码

我正在使用这些数据生成一个 jsTree，并为该树创建 json 数据，我正在执行上述操作，但将信息变量放入一个对象并对其进行迭代以创建节点。问题不在于树，所以我不会在这里包括它。我什至可以把这个逻辑拿出来进行测试。

那么发生了什么，

1. 页面开始加载
2. 我执行上述操作
3. 信息被放入 javascript 对象中
4. 我遍历了 javascript 对象。
5. 我收到错误“无法读取未定义的属性‘长度’”
6. 在调试时，我发现它跳过了 system.done。这是有道理的，因为它可能不会完成。

有没有办法等待它完成？

编辑： 提供更多信息

// 在一个被调用的文件中 loadinfo.js

// Returns system information promise
function getSystemInformation(){
    return $.ajax({
        type:"GET",
        url: getUrl(), // url is defined somewhere else
        cache: false,
        dataType: "json"
    });
}

// IN A FILE CALLED tree.js
// I have other variables from loadinfo.js that are here so they can communicate fine

    $.when(getSystemInformation(), $.Deferred(function(deferred) {
        $(deferred.resolve);
    })).done(function(data) {
        mapCache["system"] = data;
        console.log("defer DONE!!");

$.each(mapCache["system"], function(index, system) {
            var children = doDisplayChildNodes(system.name);
            ...
                    ...
});

我在 $.each 中所做的只是从 mapCache["system"] 获取数据并创建一个“jstree”节点。我做了一个子函数来做同样的事情，因为我有与每个系统关联的子节点。所有这些逻辑都有效，因为当我将 ajax 调用设为“async:false”时它可以正常工作——所以我不会发布它。

我在 $.each 期间收到无法读取未定义的属性“长度”。这很奇怪，因为我在 mapCache 上设置了“Watch”，并且在加载所有内容后， mapCache 填充了正确的值。我正在使用谷歌浏览器调试。

Answer 1

您使用了回调，但您仍然将其用于同步逻辑而不是异步。尝试这样做：

function PUT_updateSystem(id) {
    var system = getSystemInformation(name);
    system.done(function(data){
        var information = data.info;
        // do stuff with `information` here, not elsewhere.
    });
}
// Returns system information promise
function getSystemInformation(name){
    return $.ajax({
        type:"GET",
        url: getUrl(),
        cache: false,
        dataType: "json"
    });
}

Answer 2

function PUT_updateSystem(id) {
    var system= {};
    system= getSystemInformation(name, callbackfunction);

    var information = system.info;

}
//callbackfuncion
function callbackfunction(data){
    var system = data;
    return system;
}
// Returns system information
function getSystemInformation(name,callback){
    $.ajax({
        type:"GET",
        url: getUrl(),
        cache: false,
        dataType: "json",
        success: function(data){
            window[callback](data);
        }
    });
}

只是代替callback(data);
把window[callback](data);
并将函数名作为变量

Answer 3

异步意味着当 PUT_updateSystem 已经完成时调用回调。

当您调用 getSystemInformation 时向服务器发出请求，但在它被调用后该函数继续 var information = system.info;在服务器有时间响应so system.info之前；尚未设置。如果您的浏览器带有开发工具 IE、带有 firebug 插件的 firefox、Chrome，您只需按 F12。运行下面的代码，你可能会明白回调是什么意思，在控制台中查看消息（alert 不起作用，因为它会暂停 JavaScript 执行。

function PUT_updateSystem(id) {
    var system= {};
    system= getSystemInformation(name, function(data){
                                var system = data;
// you re declare system here so it' actually not set
// if you want to set system in PUT_updateSystem you should
// do system = data; without the val
console.log("this comes last");
console.log("data is returned now",data);
                                return system;});
console.log("This comes first");
    var information = system.info;

}
// Returns system information
function getSystemInformation(name,callback){
    $.ajax({
        type:"GET",
        url: getUrl(),
        cache: false,
        dataType: "json",
        success: function(data){
console.log("this comes second");
            callback(data);
        }
    });
}

Answer 4

你做得不对，回调不返回任何数据。 JavaScript 中没有等待语句。异步调用被执行，然后 JavaScript 继续处理其余代码。

你的代码应该是

function PUT_updateSystem(id) {
    var system= {};

    function processData(data) {
        var information = data.info;
        alert("Do next step");
    }

    system = getSystemInformation(name, processData);
}

将您的逻辑分为两个步骤。

1. 进行 Ajax 调用
2. 处理回调中的数据