Javascript变量未更新-可能超出范围[重复]

Question

可能重复：
AJAX响应数据未保存到全局范围？

我基本上有一个循环，使用AJAX与我的站点上的脚本联系，然后使用该脚本的响应更新字符串。 这是代码：

    // Image code array
    var result_url = 'http://localhost/view/';

    for(i = 0; i < urls.length; i++) {
        // Add URL to queue
        $('#url_queue').append('<div class="uploadifyQueueItem"><div class="cancel"><img src="/assets/img/cancel.png" /></div><span class="fileName">' + image_name_from_url(urls[i]) + '</span><div class="uploadifyProgress"><div class="uploadifyProgressBar"></div></div></div>');

        // Make a request to the upload script
        $.post('/upload', { url: urls[i], username: username }, function(response) {
            var response = jQuery.parseJSON(response);
            if(response.error) {
                alert(response.error);
                return;
            }
            if(response.img_code) {
                result_url += response.img_code + '&';
            }
        });
    }
    console.log(result_url);

记录字符串时，Firebug控制台仅显示http://localhost/view/ 。 就像我的上传脚本中的img_code响应根本没有附加到字符串。 我尝试在$.post()方法中记录result_url的值，并且效果很好，但是该值未正确保存，因为稍后在我的代码中不会显示。 这是范围问题吗？ 我需要将result_url定义为全局变量吗？

谢谢你的帮助。

Answer 1

您正在检查console.log(result_url); 在AJAX请求完成之前。

---

AJAX请求（默认情况下）是异步运行的。 这意味着您的脚本继续运行，而仍在向服务器发出请求。

您的回调函数（作为第三个参数提供给$.post ）是在您的AJAX请求完成后执行的函数。

---

还请注意，请求完成后会调用您的AJAX请求回调函数。 您的请求可能未按开始的顺序完成。 您可以通过设置async:false来防止所有这些情况，但是这将停止所有JavaScript执行。

---

另一个选择是收集$.post返回的jqXHR对象，然后调用$.when().done() ，以便仅在所有AJAX请求都解决后， console.log(result_url)才会发生：

// Image code array
var result_url = 'http://localhost/view/',
    jqHXRs = [];

for(i = 0; i < urls.length; i++) {
    // Add URL to queue
    $('#url_queue').append('<div class="uploadifyQueueItem"><div class="cancel"><img src="/assets/img/cancel.png" /></div><span class="fileName">' + image_name_from_url(urls[i]) + '</span><div class="uploadifyProgress"><div class="uploadifyProgressBar"></div></div></div>');

    // Make a request to the upload script
    jqHXRs.push($.post('/upload', { url: urls[i], username: username }, function(response) {
        var response = jQuery.parseJSON(response);
        if(response.error) {
            alert(response.error);
            return;
        }
        if(response.img_code) {
            result_url += response.img_code + '&';
        }
    }));
}

$.when.apply(this, jqHXRs).done(function(){
    console.log(result_url);
});

Answer 2

这是因为您在启动Ajax之后立即执行console.log 。 由于Ajax是异步的，因此不一定要在ajax代码之后的代码之前调用成功函数。

jQuery的Ajax工具通过包含async:false选项提供了一种同步调用ajax的方法。 尝试将您的ajax调用替换为：

$.ajax({ 
    url:'/upload', 
    data:{ url: rls[i], username:username }, 
    success:function(response) {
        var response = jQuery.parseJSON(response);
        if(response.error) {
            alert(response.error);
            return;
        }
        if(response.img_code) {
            result_url += response.img_code + '&';
        }
    },
    method:"post",

    async:false

 });

这样，仅在ajax完成后才执行紧随您的Ajax调用的代码。

请记住，尽管这将在Ajax期间锁定您的页面。 也许仅将console.log(result_url);放进console.log(result_url);容易了console.log(result_url); 在成功回调的末尾。

Answer 3

您正在循环后记录result_url，但是$ .post上传请求可能尚未完成。 我建议将使用result_url的代码放入一个连续回调中，并在您知道上一个发布请求已完成后再调用它。

例如

function continuation_code(result_url) {
    // all your code that uses result_url goes here.
}

var result_url = 'http://localhost/view/';
var num_results_returned = 0;
for(i = 0; i < urls.length; i++) {
    // Add URL to queue
    $('#url_queue').append('<div class="uploadifyQueueItem"><div class="cancel"><img src="/assets/img/cancel.png" /></div><span class="fileName">' + image_name_from_url(urls[i]) + '</span><div class="uploadifyProgress"><div class="uploadifyProgressBar"></div></div></div>');

    // Make a request to the upload script
    $.post('/upload', { url: urls[i], username: username }, function(response) {
        var response = jQuery.parseJSON(response);
        if(response.error) {
            alert(response.error);
            return;
        }
        if(response.img_code) {
            result_url += response.img_code + '&';
        }
        num_results_returned += 1;
        if (num_results_returned == urls.length) {
             continuation_code(result_url);
        }
    });
}