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設置，使呼叫同步。