为什么这个变量在函数之间传递时会发生变化

Why is this variable changing when passing it around functions?

本文关键字:变化 之间 变量 函数 为什么      更新时间:2023-09-26

Edit2:是的,发现了问题,ajax 调用中实际上有一个错误,由于我的愚蠢,我没有意识到这两种方法 - 成功和错误都可以运行(我认为它要么是其中之一),所以 formComplete 每次都被设置为 false,因为有错误。

感谢您给予的时间,并提示不要使用全局变量名称作为函数参数。

编辑:这是设置formComplete的代码(控制台.log()在整个过程中检查表单完成):

validate: function(field) {
            if(!field.val()) {
                formComplete = false;
                // formComplete is false here
                console.log(formComplete);
            }
            else {
                if(field.attr('name') === 'queryEmail') {
                    // Validate the email
                    if(DMOFFAT.helper.validateEmail(field.val()) === true){
                        // formComplete is either true or false here, depending on the last validation carried out
                        console.log(formComplete);
                        formComplete = true;
                        // formComplete is true here
                        console.log(formComplete);
                    }
                    else {
                        formComplete = false;
                        // formComplete is false here
                        console.log(formComplete);
                    }
                }
                else {
                    formComplete = true;
                    // formComplete is true here
                    console.log(formComplete);
                }
            }
        },

问:为什么这个变量(formComplete)从真变成假?

我已经为联系表单编写了一些基本的表单验证,这是我是如何完成的:

定义字段如下:

var queryTypeField = $('#queryType'),
    queryMessageField = $('#queryMessage'),
    queryEmailField = $('#queryEmail'),
    queryNameField = $('#queryName'),
    submitButton = $('#submit');

添加一些事件处理程序,如下所示(FWIW,DMOFFAT 变量只是一个包含不同代码模块的对象,例如 contactForm = contact form javascript 等):

    queryMessageField.on('blur', function() {
       DMOFFAT.contactForm.validate(queryMessageField);
    });
    queryNameField.on('blur', function() {
       DMOFFAT.contactForm.validate(queryNameField);
    });
    queryEmailField.on('blur', function() {
       DMOFFAT.contactForm.validate(queryEmailField);
    });       
    submitButton.on('click', function(evt) {
        evt.preventDefault();
        console.log('Click');
        console.log(formComplete);
        DMOFFAT.contactForm.send(formComplete);
    });

验证函数只是将'formComplete'设置为 true 或 false,具体取决于字段是否有效。

当我的字段都正确填写后,formComplete = true.

正如你从上面代码的最后一行中看到的,我formComplete(这是真的)传递给我的发送函数。我的 send 函数只是检查 formComplete 的值,然后要么将数据发送到 php 脚本,要么打印错误,代码如下:

        send: function(formComplete) {
        // This is true when the form is filled in correctly
        console.log('In send formComplete is...' + formComplete);
        if(formComplete === true) {
            // Extract form values
            formData['queryMessage'] = queryMessage.value;
            formData['queryType'] = queryType.value;
            formData['queryName'] = queryName.value;
            formData['queryEmail'] = queryEmail.value;
           $.ajax({
                type: 'POST',
                async: true,
                url: '....',
                dataType: 'json',
                data: formData,
                success: function(data, status, xhr) {
                    DMOFFAT.contactForm.writeMessage(formComplete);
                },
                error: function(xhr, status, err) {
                    DMOFFAT.contactForm.writeMessage(formComplete);
                }
            });
        }
        else {
            this.writeMessage(formComplete);
        }

现在,我知道当表单正确填写时formComplete是正确的,因为我的 php 脚本创建了一个包含数据的.txt文件,如果它是假的,则不会创建此文件。

这意味着我们将 formComplete 的值发送到 writeMessage,它只是将一些 HTML 写出到页面以显示提交是否成功,以下是代码:

 // Disgusting spaghetti code
    writeMessage: function(formComplete) {
        // This is false now...
        console.log('In writeMessage formComplete is...' + formComplete);
        if(formComplete === true) {
            contactFormElement.html('<div class="success ui-message cf-message"><p><strong>Thank you</strong> for your query, we''ll get back to you as soon as we can.</p></div>');
        }
        else {
            // Check if there's already an error, otherwise many will appear
            if(errorElement === '') {
                errorElement = '<div class="error ui-message cf-message"><p>' + this.config.errorMsg + '</p></div>';
                contactFormElement.prepend(errorElement);   
            }
        }
    }

formComplete本身的定义如下:

var formComplete;

当我在 writeMessage 的第一行检查表单完成时,它现在是错误的,我找不到为什么......即使我在传递给 writeMessage 之前明确地将formComplete设置为 true,它仍然是假的。

TLDR:请告诉我我哪里傻了:)

PS:我知道我可以使用预先构建的联系表单验证插件,但想尝试自己构建一些简单的东西。

问题是,您正在从 AJAX 请求的回调函数调用writeMessage(),因此解释器正在执行时查找全局变量。无论如何,你可以简单地在回调函数中将true传递给writeMessage(),因为调用仅在true formComplete时才执行 -