Все работает, но кнопка никогда не включается

Question

Кажется, что все это работает, но кнопка (bSaveNewTag) никогда не включается. Проходя через это, я предполагаю, что countTag не заполняется во времени, но я не понимаю, как заставить его ждать возвращаемого значения.

Я прошел с предупреждениями, которые пришли к выше Вывод, но мои знания Javascript очень просты c, поэтому я не знаю, что делать, и при поиске ответов, что я нахожу, я не понимаю и не могу понять, как реализовать.

function checkIfNewTagExists(potentialTag) {
            var countTag = 0;

            $.ajax({
                url: "/CSC/api/checkTag/" + potentialTag + "/",
                dataType: "json",
                success: function (data) {
                    $.map(data, function (item) {
                        countTag = parseInt(item.cTag, 10);
                    });
                },
                complete: function () {

                    if (countTag > 0) {
                        $('#newTag').css({ 'opacity': 1 });
                        $('#tbNewTagName').addClass("missing");
                    } else {
                        $('#newTag').css({ 'opacity': 0 });
                    }

                    return countTag;
                }
            });
        }

        function checkNewTag() {
            var countTag = 0;
            var potentialTag = '';
            var val = Page_ClientValidate("vgNewTag");
            var el = $("#bSaveNewTag")

            for (i = 0; i < Page_Validators.length; i++) {
                if (Page_Validators[i].isvalid) {
                    $("#" + Page_Validators[i].controltovalidate).removeClass("missing");
                } else {
                    $("#" + Page_Validators[i].controltovalidate).addClass("missing");
                }
            }

            potentialTag = $('#tbNewTagName').val();
            if (potentialTag == '') {
                countTag = 1;
            } else {
                countTag = checkIfNewTagExists(potentialTag);
            }

            if (val && countTag === 0) {
                el.prop("disabled", false);
            } else {
                el.prop("disabled", true);
                return false;
            }
        }

Answer 1

Если вы не поняли мои комментарии выше или статью, на которую я ссылался, вот разбивка того, что вы должны сделать.

function checkIfNewTagExists(potentialTag, callback) {
    var countTag = 0;

    $.ajax({
        url: "/CSC/api/checkTag/" + potentialTag + "/",
        dataType: "json",
        success: function (data) {
            $.map(data, function (item) {
                countTag = parseInt(item.cTag, 10);
            });
        },
        complete: function () {
            if (countTag > 0) {
               $('#newTag').css({ 'opacity': 1 });
                $('#tbNewTagName').addClass("missing");
            } else {
                $('#newTag').css({ 'opacity': 0 });
            }

            //return countTag;
            callback(countTag);
        }
    });
}

Тогда эта часть:

potentialTag = $('#tbNewTagName').val();
if (potentialTag == '') {
    countTag = 1;
} else {
    countTag = checkIfNewTagExists(potentialTag);
}

if (val && countTag === 0) {
    el.prop("disabled", false);
} else {
    el.prop("disabled", true);
    return false;
}

Должно быть (что-то) примерно так:

potentialTag = $('#tbNewTagName').val();
if (potentialTag == '') {
    countTag = 1;
    el.prop("disabled", true);
} else {
    //countTag = checkIfNewTagExists(potentialTag);
    checkIfNewTagExists(function(cTag){
        countTag = cTag;

        if (val && countTag === 0) {
            el.prop("disabled", false);
        } else {
            el.prop("disabled", true);
        }
    });
}

Теперь я вижу, что у вас есть return false; в последней строке else checkNewTag. Если вы намереваетесь вернуть что-то в вызывающую линию, вам также следует использовать функцию обратного вызова вместо var x = checkNewTag();