一切正常，但按钮永远不会启用答案

【问题标题】：It all works, but the button never becomes enabled一切正常，但按钮永远不会启用
【发布时间】：2020-03-12 06:01:56
【问题描述】：

这一切似乎都有效，但按钮 (bSaveNewTag) 从未启用。通过它，我猜测 countTag 没有及时填充，但我不知道如何让它等待返回值。

我已经通过警报得出了上述结论，但是我对 Javascript 的了解非常基础，所以不知道该怎么做，在搜索答案时，我找到了什么，我不知道理解却不知道如何实现。

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;
            }
        }

【问题讨论】：

您在宽限期内对其进行了编辑，但仍然 - 不要在您的帖子中添加垃圾邮件文本以绕过要求您解释更多问题的要求 - 相反，请实际上更详细地解释问题，例如您尝试的哪种调试不起作用。查找如何创建 minimal reproducible example 也可能会有所帮助 - 考虑删除与问题不直接相关的代码。
以这种方式使用ajax 时的问题是，它永远不会使用return 关键字返回结果。您应该尝试使用回调函数。 developer.mozilla.org/en-US/docs/Glossary/Callback_function
您正在根据使用 ajax 的 checkIfNewTagExists 的结果启用/禁用按钮。您的return countTag; 并没有真正通过调用checkIfNewTagExists 返回值，它只将值返回给调用complete 回调函数（即ajax 调用）的那个。

标签： javascript ajax asynchronous

【解决方案1】：

如果你不理解我上面的 cmets，或者我引用的文章，这里是你应该做什么的细分。

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; 在 checkNewTag 的最后一行 else 中。如果你打算向调用行返回一些东西，你还应该使用回调函数而不是var x = checkNewTag();

【讨论】：