Javascript 변수 범위가 나를 방해하고있다

Question

나는이 사실을 알지 못한다. getJson2 함수를 호출 한 후에 변수 "json"에 액세스 할 수 없습니다. PHP 스크립트를 통해 동적으로 json을 얻습니다. 그러나 그 후에 사라졌습니다. json이 init 함수에 포함되어있는 The InfoVis examples에서 지침으로 사용하는 샘플이 있습니다. 나는 그것을 거기에서 동적으로 얻으려고 노력하고있다.

<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()에 대한 콜백 함수는 무언가를 반환하지만 아무것도 반환하지 않습니다.

대신에 동기 로딩을 원하는 것 같습니다. (See docs)

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

그리고 $.ajax()이 false에 async 설정과 같은 더 많은 기능을 지원합니다 $.get()이 $.ajax() 호출 단지 속기이다. 의미

$.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; 
    } 
}); 

또는, 당신은 당신의 데이터를 반환하는 작업을 할 경우에 sychronous Ajax 호출을 할 수있는 (그러나 응답이 받았다 때까지 물론 스크립트의 실행을 차단하는 것입니다). 이를 수행하려면에 대한 인수 asynch을 참조하십시오.

Answer 3

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

$ .get은 비동기식입니다. 따라서 귀하의 가치는 결코 반환되지 않습니다. 콜백을 만들어야합니다.

같은 질문

여기에 나타납니다 Return $.get data in a function using jQuery

Answer 4

jQuery $ .get 호출은 비동기이며 실제로 데이터 자체가 아니라 약속을 반환합니다. 콜 동기를 만들기 위해,

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

다른 방법으로 당신의 아약스 설정을 변경

이 처리하는 우아한 방법은 then() method을 사용하는 것입니다.