Javascript变量范围阻碍了我

时间:2012-12-12 18:38:25

标签: javascript infovis

我似乎无法为我的生活得到这个。在我调用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  ..................

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

$.get调用是异步的。当你调用return data;时,该函数已经很久才返回。在函数范围之外创建一个变量,然后在$.get回调处理程序中,为该变量指定data

var json;

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

或者,您可以执行 sychronous Ajax调用,在这种情况下,返回数据会起作用(但当然会阻止脚本执行,直到收到响应)。要完成此操作,请参阅jQuerys $.ajax functionasynch参数。

答案 2 :(得分:1)

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

处理此问题的一种优雅方法是使用then() method

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

或者,更改您的ajax设置以使呼叫同步。

答案 3 :(得分:0)

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

$ .get是异步的。所以你的价值永远不会归还。你必须创建一个回调。

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