Javascript可变范围妨碍我

Question

我似乎无法得到这个为我的生活。我调用getJson2函数后无法访问变量“json”。我通过一个PHP脚本动态地获得我的json，并且工作。但随后它消失了。在The InfoVis examples处有一个示例，我将其用作指导，其中json嵌入在init函数中。我正试图在那里动态获取它。

<script language="javascript" type="text/javascript"> 
var labelType, useGradients, nativeTextSupport,animate,json; 
function getJson2() 
{ 
    var cd = getParameterByName("code"); 
    $.get("tasks.php?code="+cd, function(data){ 
    return data; 
    }) 
}; 
function getParameterByName(name) 
{ 
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
    var regexS = "[\\?&]" + name + "=([^&#]*)"; 
    var regex = new RegExp(regexS); 
    var results = regex.exec(window.location.search); 
    if(results == null) 
    return ""; 
    else 
    return decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

(function() { 
    var ua = navigator.userAgent, 
     iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), 
     typeOfCanvas = typeof HTMLCanvasElement, 
     nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), 
     textSupport = nativeCanvasSupport 
     && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); 
    //I'm setting this based on the fact that ExCanvas provides text support for IE 
    //and that as of today iPhone/iPad current text support is lame 
    labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML'; 
    nativeTextSupport = labelType == 'Native'; 
    useGradients = nativeCanvasSupport; 
    animate = !(iStuff || !nativeCanvasSupport); 
})(); 
debugger; 
var Log = { 
    elem: false, 
    write: function(text){ 
    if (!this.elem) 
     this.elem = document.getElementById('log'); 
    this.elem.innerHTML = text; 
    debugger; 
    this.elem.style.left = (500 - this.elem.offsetWidth/2) + 'px'; 
    } 
}; 
function init(){ 
json = getJson2(); 
    //init data 
var st = new $jit.ST({ 
    //id of viz container element 
    injectInto: 'infovis', 
    //set duration for the animation 
    duration: 800, 
    //set animation transition type .................. 

Answer 1

function getJson2() 
{ 
    var cd = getParameterByName("code"); 
    $.get("tasks.php?code="+cd, function(data){ 
    return data; 
    }) 
}; 

getJson2()不返回任何东西。 $.get()的回调函数返回一些内容，但没有任何内容正在侦听该返回。

它听起来像你想要同步加载。 $.get()仅仅是这个$.ajax()呼叫简写：(See docs)

$.ajax({ 
    url: url, 
    data: data, 
    success: success, 
    dataType: dataType 
}); 

而且$.ajax()支持更多的功能，如设置async到false。

$.ajax({ 
    url: "tasks.php?code="+cd, 
    async: false, 
    dataType: 'json', 
    success: function(data) { 
    // data ! 
    } 
}); 

这意味着，getJson2就变成了：

function getJson2() 
{ 
    var cd = getParameterByName("code"); 
    var jsonData; 

    $.ajax({ 
    url: "tasks.php?code="+cd, 
    async: false, 
    dataType: 'json', 
    success: function(data) { 
     jsonData = data; 
    } 
    }); 

    return jsonData; 
}; 

var myJsonData = getJson2(); 

或者仍然使用$.get异步风格，并使用回调来代替。

function getJson2(callback) 
{ 
    var cd = getParameterByName("code"); 
    $.get("tasks.php?code="+cd, function(data){ 
    callback(data); 
    }); 
}; 

getJson2(function(data) { 
    // do stuff now that json data is loaded and ready 
}); 

Answer 2

$.get调用是异步的。当您拨打return data;时，该功能早已返回。创建一个超出函数范围的变量，然后在$.get回调处理程序中，将data分配给该变量。

var json; 

function getJson2(){ 
    // ... 
    $.get(...., function(response){ 
     json = response; 
    } 
}); 

或者，你可以做一个采用同步 Ajax调用，在这种情况下，返回你的数据将工作（但直到响应收到当然会阻止脚本执行）。要完成此操作，请参阅asynch参数jQuerys $.ajax function。

Answer 3

$.get("tasks.php?code="+cd, function(data){ 
    return data; 
    }) 

$ .get is asynchroneous。所以你的价值永远不会被退回。你将不得不创建一个回调。

同样的问题出现在这里： Return $.get data in a function using jQuery

Answer 4

jQuery $ .get调用是异步的，实际上是返回一个promise，而不是数据本身。

一种优雅的方式来解决这个问题是使用then() method：

$.get(...).then(function(data){...}); 

或者，改变你的AJAX设置，使呼叫同步。