javascript - 确定 Javascript 函数范围问题的范围

Question

很明显，我不明白 Javascript 中函数的作用域是如何划分的。这是最新的示例:

function riseData() { 
    var jsonResult;
    $.ajax({
        success: function(data, textStatus, jqXHR){
            jsonResult = jqXHR.responseText;
            alert("Inside: " + jsonResult);
        },          
        error: function (jqXHR, textStatus, errorThrown) {  
            $('#errLog').append('<br>Status: ' + qXHR.statusText);                  
        }
    });
    return jsonResult;
}

$(document).ready(function(){
    var intervalID = setInterval('UTCclock()',100); 
    alert("Outside: " + riseData());                            
});

当我执行此命令时，“内部”警报正常运行，但“外部”警报显示“未定义”，即使 riseData() 显然仅在几行之前定义。代码前面有一个 $.ajaxSetup，它定义了 ajax 调用的参数。 ajax 调用成功返回“内部”警报中请求的数据。

我完全不知道如何使必要的数据 (jqXHR.responseText) 可用于脚本的其他部分。

谁能给我指出解决此问题的“Javascript Scoping for Dummies”指南？

Answer 1

您的示例范围限定得很好。您的问题是您不了解 JavaScript 主要是异步的含义。

让我通过您的示例向您展示。

1. 您的文档就绪处理程序运行。
2. 它调用 riseData。
3. riseData 声明了一个变量，jsonResult。
4. riseData 调用 $.ajax，它安排 AJAX 请求完成，但响应将在稍后发生。
5. 由于 $.ajax 通常是非阻塞/异步的，riseData 继续并返回 jsonResult。由于 AJAX 请求尚未完成，jsonResult 尚未分配，因此返回默认值 undefined。
6. 在文档就绪处理程序中，您最终得到 alert("Outside: "+undefined);。

事件循环到几毫秒后，会发生这种情况:

1. AJAX 请求已完成。 jQuery 将其转发给您的回调。
2. jsonResult 已设置，但 riseData 已返回。
3. riseData 中的 alert 会在文档就绪处理程序已向 undefined 发出警报后用新数据发出警报。

这个问题有两种解决方案。第一个解决方案很简单，但通常会导致更差的用户体验。这个解决方案是在$.ajax中添加async: false选项。这使得 $.ajax 阻止并卡住浏览器。

第二种解决方案是对几乎所有内容都采用异步样式。这意味着让 riseData 接受回调并在 AJAX 响应处理程序中调用它。这是使用此方法转换的代码:

function riseData(callback) { 
    $.ajax({
        success: function(data, textStatus, jqXHR){
            var jsonResult = jqXHR.responseText;
            alert("Inside: " + jsonResult);
            callback(jsonResult);
        },          
        error: function (jqXHR, textStatus, errorThrown) {  
            $('#errLog').append('<br>Status: ' + qXHR.statusText);                  
        }
    });
}

$(document).ready(function(){
    //var intervalID = setInterval('UTCclock()',100); 
    // Unrelated, but it's better to pass a
    // function into setInterval than a string.
    var intervalID = setInterval(UTCclock, 100);
    riseData(function(jsonResult) {
        alert("Outside: " + jsonResult);
    });
});