jQuery:如何在 $.ajax() 中访问全局变量

Question

这个问题已经有答案了:

已关闭 12 年前。

Possible Duplicate:
Can't access global variable in jQuery $.get within function

这可能是一个新手问题，但事情是这样的:我声明了一个名为 Preview 的全局变量。通过 AJAX，我得到一个 json 数组并循环遍历它。对于每次迭代，我都会执行另一个 AJAX 调用来获取字符串并将其附加到全局变量。

但是，在第二次 AJAX 调用后打印全局变量会给出“空字符串”(我肯定会从第二次 AJAX 调用中返回一个字符串)。

代码如下:

var preview;
$("#some-button").click(function(e){
    e.preventDefault();
    var companies = "blahblahblah";

    $.ajax({
        url: "tracklink/getemails.php",
        type: "POST",
        data: "companies=" + companies,
        dataType: "json",
        success: function(databack) {
            if (databack) {
                for (i=0; i<databack.length; i=i+1) {
                    preview = "";
                    $("#selected-clip-list li").each(function(){
                        $.ajax({
                            url: "tracklink/cksum.php",
                            type: "POST",
                            data: "video_id=" + $(this).attr("clip_id") + "&addr=" + databack[i].email_address,
                            success: function (msg) {
                                if (msg) {
                                    preview += msg;
                                }
                                //this works
                                //console.log(preview);
                            }
                        });
                    });
                    //doesn't work
                    console.log(preview);
                }
            }
        }
    });
});

知道为什么我得到“空字符串”吗？

非常感谢。

Answer 1

因为 Ajax 是异步的。这一行:

//doesn't work
console.log(preview);

在处理响应之前执行。这就是您提供回调函数 (success:) 来处理响应的原因。

所有处理响应的代码都必须位于回调内部或从回调中调用。

这与回调中无法访问预览无关(因为它是可访问的)。

更新:您可以使用 Deferred objects 解决此问题:

success: function(databack) {
        if (databack && databack.length > 0) {
            var deferred = $.Deferred();

            preview = "";
            for (i=0; i<databack.length; i=i+1) {
                $("#selected-clip-list li").each(function(){
                    deferred = deferred.pipe($.ajax({...}));
                });                  
            }
            deferred.then(function() {
                console.log(preview);
            });
        }
    }

这将按顺序执行 Ajax 请求(但非阻塞)，以便将响应以正确的顺序附加到 preview 中。但实际上我并不是 100% 清楚你想在预览中收集哪些数据。你确定这个嵌套的 for 循环是正确的吗？

如果你不关心Ajax请求的顺序，你也可以这样做:

var deferreds = [];
for (i=0; i<databack.length; i=i+1) {
    $("#selected-clip-list li").each(function(){
       deferreds.push($.ajax({...}));
    });                  
}
$.when.apply($, deferreds).then(function() {
    console.log(preview);
});