在 AJAX 和 Javascript 中使用变量和变量范围 [重复]答案

【问题标题】：Using variables and variables scope in AJAX and Javascript [duplicate]在 AJAX 和 Javascript 中使用变量和变量范围 [重复]
【发布时间】：2015-01-13 13:45:00
【问题描述】：

我在 AJAX 中使用变量时遇到问题。我希望 var x 记住来自 var 数据的数据。但是，当我检查控制台日志时，该值是未定义的。有人可以帮我吗？编辑：我需要稍后在代码中使用变量 x 。这不仅仅是检查价值。

var x;

var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var results = new Array();
            var numberOfSuggestions = 0;

            var data = xmlhttp.responseText;                
            var data = eval(data);
            x = data;

            /*
            some code
            */
        }
    }
console.log(x);

【问题讨论】：

标签： javascript ajax variables scope

【解决方案1】：

您在 xmlhttp.onreadystatechange 事件的回调函数之外输出变量 x，只有在事件触发时才会调用该函数。

为了在请求完成后查看分配给 x 的值，请将您的 console.log 放入回调函数中。

var x;

var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var results = new Array();
            var numberOfSuggestions = 0;

            var data = xmlhttp.responseText;                
            var data = eval(data);
            x = data;
            console.log(x);
            /*
            some code
            */
        }
    }

【讨论】：

好的，但我想稍后使用变量 x。这与查看 x 值无关。这是为了以后保存价值。
要么使用同步 ajax 调用 - 例如使用 jQuery - 要么使用回调来触发下一个所需的函数。我认为您需要认真学习异步编程。像这样的东西：recurial.com/programming/…

【解决方案2】：

由于 AJAX 是异步的，您的 console.log(x) 在响应准备好评估之前执行。您必须同步编写 var x 相关代码。您可以将使用var x 的代码放在一个函数中，然后在响应准备好并进行评估后调用该函数。

var x;

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var results = new Array();
        var numberOfSuggestions = 0;

        var data = xmlhttp.responseText;                
        var data = eval(data);
        x = data;

        /*
        var x dependent code 
              OR
        xdependentFunc(x);
        */
    }
}

function xdependentFunc(x){
  /*
   use x...............
  */
}
console.log(x);

【讨论】：