JavaScript超出范围

Question

基于chrome开发人员工具，我认为我正在处理一个断点，可以解决。 是我定义函数的方式吗？ 下面的脚本是一个include js文件和数组'timeStamp，我希望可用于其他函数中，而不必每次都调用loadData函数。

一旦离开for循环，甚至在离开函数之前，timeStamp数组都将变为未定义。

var timeStamp = [];  // Want this array to be global

function loadData (url){

        $.getJSON(url, function(json) {

            for (var i=0;i<json.length;i++){
                    timeStamp.push(json[i].TimeStamp);  
                }
                    console.log(inputBITS); //returns the value
            });
        console.log(inputBITS); //undefined
        }

感谢您的任何帮助

Answer 1

看起来问题在于getJSON是异步的。 当它执行并完成并且您的代码继续进行时，它仅指示联网操作的开始以检索数据。 直到一段时间后，实际的网络操作才完成。

完成后，将调用成功处理程序（作为getJSON()调用的第二个参数指定），然后填充timeStamp数组。 仅在成功处理程序被调用之后， timeStamp数组才有效。

因此，您不能在紧接getJSON()调用的代码中使用timeStamp数组（尚未填充）。 如果其他代码需要timeStamp数组，则应从成功处理程序中调用该代码，或使用其他计时机制来确保使用timeStamp数组的代码在调用成功处理程序之后才尝试使用它。 timeStamp数组已填充。

可以使某些Ajax调用是同步的而不是异步的，但这通常是一个非常糟糕的主意，因为它会在整个网络操作过程中锁定浏览器，这对查看者非常不友好。 修复编码逻辑以与异步网络一起工作会更好。

像这样的ajax调用的典型设计模式如下：

function loadData (url){

    $.getJSON(url, function(json) {
        // this will execute AFTER the ajax networking finishes
        var timeStamp = [];
        for (var i=0;i<json.length;i++) {
                timeStamp.push(json[i].TimeStamp);  
        }
        console.log(timeStamp);
        // now call other functions that need timeStamp data
        myOtherFunc(timeStamp);
     });
     // this will execute when the ajax networking has just been started
     //
     // timeStamp data is NOT valid here because 
     // the ajax call has not yet completed
     // You can only use the ajax data inside the success handler function
     // or in any functions that you call from there
}

Answer 2

And here's another person who doesn't understand basic AJAX...

getJSON is asynchronous. Meaning, code keeps running after the function call and before the successful return of the JSON request.

You can "fix" this by forcing the request to be synchronous with an appropriate flag, but that's a really bad idea for many reasons (the least of which is that you're violating the basic idea of AJAX). The best way is to remember how AJAX works and instead put all your code that should be executed when the AJAX returns, in the right place.