如何在 $.ajax() 成功回调中引用自定义 jQuery 验证器方法？

Question

对于此类问题的百万次迭代，我深表歉意。我已经看到许多其他帖子都在讨论这个问题，但我仍然无法在回调成功并返回后调用函数。这篇文章我一定读了六遍以上：

How do I return the response from an asynchronous call?

代码

无论如何..，我的问题希望任何人都可以阐明。我有一个自定义的 jQuery 验证器方法来检查用户名是否可用。

jQuery.validator.addMethod("usernameAvailability", 
        function(value, element) {
            console.log('starting usernameAvailability');
            if(this.optional(element) === true){return true;}
            else{
                 console.log('ending usernameAvailability, about to return get_availability');
                 return availabilityCheck.get_availability('username');
            }
        }, "Username already in use." );

自定义 jQuery 验证器方法调用命名空间可用性检查中的 get_availability(element)。

var availabilityCheck = (function() {
        var usernameIsAvailable, emailIsAvailable, Callback, AJAX_Availability_Check, change_Availability;
        usernameIsAvailable = null;
        emailIsAvailable = null;
        AJAX_Availability_Check = function(callback, element){
                console.log('starting AJAX_Availability_Check');
                if(element==="username"){
                    selection = {username:$('#id_username').val()};
                }
                else{
                    selection = {email:$('#id_email').val()};
                }
                $.ajax({
                    url: '/register/',
                    type: 'get',
                    data: selection,
                    dataType:'text',
                    async: true
                    }).done(Callback(element));

            };
        change_Availability = function(element, bool) {

            if(element === 'username'){
                usernameIsAvailable = bool;
            }
            else{
                emailIsAvailable = bool;
            }

        };
        Callback = function(element) {
            return function(result, textStatus){
                bool = result === "True" ? true: false;
                change_Availability(element, bool);
                return usernameIsAvailable;
            };
        };
        return{
            get_availability: function(element){
                AJAX_Availability_Check(Callback, element);
                return element === 'username' ? usernameIsAvailable : emailIsAvailable; 

            }
        }
    })();

问题和我的问题

我的问题 输入正确地验证了用户名是否已被使用，但用户需要触发验证两次，因为 get_availability 在回调可以将 usernameIsAvailable 更改为正确的布尔值之前返回。

我的问题如何重构我的代码，以便回调调用我的自定义 jQuery 验证方法？或者我如何确保它在回调返回之前不会验证？

Answer 1

问题在于你的结构......我不知道你从哪里得到的，但把它扔掉并烧掉它，然后忘记你曾经见过它。

您可以将代码简化为如下所示：

var availabilityCheck = function() {
    var usernameIsAvailable = null, emailIsAvailable = null, 
        AJAXAvailabilityCheck, changeAvailability;

    AJAXAvailabilityCheck  = function(element){
        console.log('starting AJAX_Availability_Check');
        if(element==="username"){
            selection = {username:$('#id_username').val()};
        }
        else{
            selection = {email:$('#id_email').val()};
        }
        $.ajax({
            url: '/register/',
            type: 'get',
            data: selection,
            dataType:'text',
            async: true
        }).done(changeAvailability(element));
    };
    changeAvailability = function(element, theBool) {
        if(element === 'username'){
            usernameIsAvailable = theBool;
        }
        else{
            emailIsAvailable = theBool;
        }
    };
    this.getAvailability = function(element) {
        AJAXAvailabilityCheck(element);
        return element === 'username' ? usernameIsAvailable : emailIsAvailable;
    }
};

因此，您的回调现在实际上是有用的，而不仅仅是另一个无用的层。
但是，正如我在下面指出的那样，据我所知，您的结果实际上并没有被定义，所以您必须弄清楚 theBool 应该是什么。

注意事项：

    Callback = function(element) {
        return function(result, textStatus){
            bool = result === "True" ? true: false;
            change_Availability(element, bool);
            return usernameIsAvailable;
        };
    };

您无缘无故地返回了一个匿名函数，并且您的 result 变量没有定义...至少使用您拥有的代码，所以您拥有的总是解析为 false。此外，如果您只是检查真实性，那么您不需要一个元组，您可以只执行 result === "True" 它将评估为真或假，不需要额外的 ? true : false。

另外，不要使用像bool 这样的词作为变量名。 Bool 是一种变量，是一个保留字。 Javascript 可以让你使用它，因为... Javascript 可以让你做任何事情，但它是不好的做法。

最后你混合了 10 种不同类型的肠衣。现在大小写是个人偏好（我个人更喜欢下划线而不是camelCase，这是javascript约定），但不管你使用什么大小写。 仅使用一个案例！

---

现在我相信您真正的问题是您不了解自调用函数的用途。

你使用这个语法：var availabilityCheck = (function(){})(); 创建一个自调用函数；这意味着它会在没有被调用的情况下触发！这意味着所有这一切都是在您的用户尚未输入任何数据时调用您的 ajax 并导致无关的服务器命中。

我相信您这样做了，因此您可以在调用函数中使用此语法 availabilityCheck.getAvailability()，但更好的方法是执行我上面所做的操作，并通过使用使 getAvailability 成为 availabilityCheck 的属性this 关键字。然后，您可以使用相同的语法而无需运行整个函数两次。

您几乎不应该（当然总是有例外）将 ajax 调用放在自调用函数中。如果调用不依赖于用户输入，那么您应该在第一次请求页面时加载数据。