javascript - 访问对象需要setTimeout？

Question

我以前没有遇到过这种情况，搜索也没有找到答案。我有一个拉入 javascript 对象的 ajax 调用。

var order = checkOrder();
console.log("t1: ", order);
setTimeout(function() {
    console.log("t2: ", order.responseText);
    console.log("t3: ", order.statusText);
    console.log((order.responseText != '') ? order.responseText : order.statusText);
}, 100);

function checkOrder() {
    return $.get('SCRIPTPATH', function(data) { return data; });
}

我想不通的奇怪部分是第一个 console.log 吐出正确的数据，表明“顺序”实际上设置为正确的对象数据，但当我尝试访问数据时，它是未定义的。只有当我将它包装在一个不小于 100 的 setTimeout 函数中时，它才会为这些对象值输出正确的数据。

有人知道为什么会这样吗？ order 变量再次设置为第一个 console.log 输出所有正确的数据，只有在那之后尝试访问 undefined object 值，除非我将它们包装在超时函数中。

控制台中的输出(展开对象，以便您可以看到那里的数据值):

t1:  {…}
    ​abort: function abort()​
    always: function always()​
    catch: function catch()​
    done: function add()​
    fail: function add()​
    getAllResponseHeaders: function getAllResponseHeaders()​
    getResponseHeader: function getResponseHeader()​
    overrideMimeType: function overrideMimeType()​
    pipe: function pipe()​
    progress: function add()​
    promise: function promise()
    ​
    readyState: 4
    ​
    responseText: "OK"
    ​
    setRequestHeader: function setRequestHeader()​
    state: function state()
    ​
    status: 200
    ​
    statusCode: function statusCode()
    ​
    statusText: "OK"
    ​
    then: function then()​
    <prototype>: Object { … }

t2:  undefined
t3:  undefined
undefined

checkOrder 函数使用 jQuery $.get() 并且我检查了代码的其余部分是否有 ajaxSubmitComplete 或类似的东西，但没有类似的东西。 1/10 秒的延迟没什么大不了的，但不喜欢必须将所有后续代码包装在超时函数中的想法。

根据 mgarcia 的回答，这里更新的代码似乎可以工作(好的是服务器脚本在成功时给出的响应):

checkOrder().then(function(order) {
    if(order == "OK") {
        //proceed with order
    }
    else {
        //something went wrong
    }
});

function checkOrder() {
    return $.get('SCRIPTPATH', function(data) { return data; });
}

Answer 1

ajax 是异步的。你有一个竞争条件，设置超时正在工作(现在)，因为你的 ajax 在超时用完之前返回。如果您的服务器端调用花费的时间更长，它将无法正常工作(一切仍未定义)

您可以编写一个函数来处理来自 ajax 的响应，并将其传递给 ajax 调用，而不是仅仅返回数据并指望它在下一行可用。

function handleData = function(order) { 
    console.log("t2: ", order.responseText);
    console.log("t3: ", order.statusText);
    console.log((order.responseText != '') ? order.responseText : order.statusText);
}

function checkOrder() {
    return $.get('SCRIPTPATH', handleData);
}