jQuery.ajax() 内部的范围问题

Question

我通过将标签字符串保存到变量中来缓存标签字符串，但遇到了奇怪的范围问题。我知道这与关闭有关，但我似乎无法弄清楚问题到底是什么。

info_lbl = {};

$("#chkCorporateGift").click(function(){
    var type = $(this).is(":checked") ? "Corporate" : "Personal";
    if(!info_lbl.hasOwnProperty(type)){
        $.ajax({
            url: svc_og + "Get" + type + "InformationLabel",
            success: function(data){
                info_lbl[type] = data;
            }
        });
    }
    $("#lblInformationType").text(info_lbl[type]);
});

第一次调用 GetCorporateInformationLabel 或 GetPersonalInformationLabel 方法时，不会设置 lblInformationType 标签。第一次调用每个标签后，标签的值就会发生变化。有人可以解释一下为什么会出现这种行为吗？当我使用 Firebug 并在 $("#lblInformationType").text(info_lbl[type]); 上设置断点时，info_lbl[type] 包含正确的值并且前两次通话一切正常。

Answer 1

AJAX 调用是异步的。这意味着请求后面的任何代码在运行之前都不会等待请求返回。

换句话说，AJAX 请求不会阻止后续代码行的执行。因此，当收到 AJAX 请求的响应时，以下代码行已经执行。

任何依赖 AJAX 请求响应的代码都应放置在回调内。

$("#chkCorporateGift").click(function(){
 //   var type = $(this).is(":checked") ? "Corporate" : "Personal";
    // It is more efficient to use this.checked instead of using .is(":checked")
    var type = this.checked ? "Corporate" : "Personal";
    if(!info_lbl.hasOwnProperty(type)){
        $.ajax({
            url: svc_og + "Get" + type + "InformationLabel",
            success: function(data){
                info_lbl[type] = data;
                  // code that relies on the response needs to be placed in
                  //   a callback (or in a function that is called here).
                $("#lblInformationType").text(info_lbl[type]);
            }
        });
    } else {
        $("#lblInformationType").text(info_lbl[type]);
    }
});

我认为，当你有一个断点时，一切正常工作的原因是执行的暂停给了 AJAX 响应返回的时间。

---

编辑：通过使用 this.checked 而不是原始的 $(this).is(':checked') 提高了代码效率。

Answer 2

将此行：

        $("#lblInformationType").text(info_lbl[type]);

移至“成功”回调中。

Answer 3

如上所述，有两种解决方案：

1）使 $.ajax 异步

$.ajax({
    url: svc_og + "Get" + type + "InformationLabel",
    async: false,
    success: function(data){
        info_lbl[type] = data;
    }
});

2）保持异步但执行两次：

var type = $(this).is(":checked") ? "Corporate" : "Personal";
if(!info_lbl.hasOwnProperty(type)){
    $.ajax({
        url: svc_og + "Get" + type + "InformationLabel",
        success: function(data){
            info_lbl[type] = data;
            $("#lblInformationType").text(data);
        }
    });
}
$("#lblInformationType").text(info_lbl[type]);