Проблемы с ограничением объема внутри 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]);
});

Метка lblInformationType не устанавливается при первом вызове методов GetCorporateInformationLabel или GetPersonalInformationLabel.После первого вызова каждого из них значение метки изменяется.Может кто-нибудь объяснить, почему это происходит?Когда я использую Firebug и устанавливаю точку останова на $("#lblInformationType").text(info_lbl[type]);, info_lbl[type] содержит правильное значение, и все отлично работает и на первых двух вызовах.

Answer 1

AJAX-вызовы являются асинхронными.Это означает, что любой код, следующий за запросом, не ждет, пока запрос не вернется, прежде чем он будет выполнен.

Другими словами, запрос AJAX не блокирует выполнение последующих строк кода.Таким образом, к моменту получения ответа от AJAX-запроса уже были выполнены следующие строки кода:

Любой код, основанный на ответе AJAX-запроса, должен быть размещен внутри callback.

$("#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

Как сказано выше, есть 2 решения:

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]);

Answer 3

Переместите эту строку:

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

в обратный вызов «success».