js变量作用域问题答案

【问题标题】：js variable scope questionjs变量作用域问题
【发布时间】：2010-09-14 15:21:21
【问题描述】：

如何使数据覆盖结果变量？

var ajax = {
    get : {
        venues : function(search){
            var results = "@";
            $.getJSON("http://x.com/some.php?term="+search+"&callback=?",function(data){ results = data; });
            return results;
        }
    }
};

【问题讨论】：

不是范围问题。您需要了解异步代码和回调是如何工作的。参见例如。 stackoverflow.com/questions/2021114/…, stackoverflow.com/questions/1092563/… 为其他落入同一陷阱的人。

标签： javascript jquery

【解决方案1】：

data 是覆盖results，就在results返回之后。

您可以使用ajax 函数代替getJSON，因为getJSON 只是

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

然后还将async设置为false，这样调用就会阻塞。

但是，在您的情况下，这不起作用，因为 JSONP 请求（使用 "?callback=?"）不能同步。

另一个（更好的）选择是让任何依赖于results返回值的代码都被success回调调用。

所以，不要像这样：

var results = ajax.get.venues('search');
$('#results').html(translateResults(results));

可能是这样的：

ajax.get.venues('search', function (results) {
    $('#results').html(translateResults(results));
});

venues = function (search, callback) {
    $.getJSON("http://x.com/some.php?term="+search+"&callback=?",
              function(data){
                  callback(data); 
              });
};

【讨论】：

【解决方案2】：

您的问题是 JavaScript 的异步特性。 results 确实会被覆盖，但只是在函数退出之后，因为回调是在请求完成时执行的。

您必须使用 sync: true 使 Ajax 调用同步（这通常不是一个好主意，只是为了完整性起见提及它）或重组您的代码流，使其不依赖于 return 值 any更多，但你需要做的一切都在回调函数中完成。

【讨论】：

【解决方案3】：

这不是范围问题。这是因为$.getJSON 是异步的； results 在 $.getJSON 完成之前返回。尝试为$.getJSON 进行回调，以便在完成后调用。

function JSON_handler(data){
    // do stuff...
}

$.getJSON("http://x.com/some.php?term="+search+"&callback=?", JSON_handler);

【讨论】：

【解决方案4】：

您可以将要运行的逻辑放在回调中。

    var ajax = {
      get : {
        venues : function(search, fnCallback){
            var results = "@";
            $.getJSON("http://x.com/some.php?term="+search+"&callback=?",
                function(data){ 
                    // success
                    results = data; 
                    (typeof fnCallback == 'function') && fnCallback(data);
                });
            return results;
        }
    }
};

ajax.get.venues(term, function(result){
    // Do stuff with data here :)
})

函数式编程可以很有趣。

【讨论】：