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 async 风格，并改用回调。

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