jquery：防止重新提交表单，直到第一个事件完成

Question

我有一个通过 Ajax / jQuery 拦截的表单。 这里的问题是，如果某些字段未填写，我会将错误从textStatus 显示为错误div。 然后，我的函数将完全删除 div 并在删除原始 div 后重新插入一个新的空 div（再次让 div 显示错误）。 发生的情况是，如果我多次提交表单，新的错误 div 将在 dom 中插入多次，并且错误将立即在原始错误 div 中显示 3 次。我当然只需要显示一个错误 div 和一组错误。 我的脚本如下：

jQuery(function ($) {
    $(document).ready(function () {

        $("#AddModel").on("submit", function (e) {

            var SubmitButton = $("#AddBtn");

            SubmitButton.blur();

            var form = $(this);

            var postData = new FormData($("#AddModel")[0]);

            var errors = $('#errors');

            var theForm = $('#theForm');

            var divAlert = "<div id=\"errors\">AAA<\/div>";

            $.ajax({
                type: 'POST',
                url: form.prop('action'),
                processData: false,
                contentType: false,
                data: postData,
                success: function (data) {

                    console.log(data);

                },

                error: function (textStatus) {

                    var json = JSON.parse(textStatus.responseText);

                    $.each(json, function (key, value) {

                        var errorVar = "";
                        errorVar += "<div id=\"error\" class=\"col-lg-6 alert alert-danger\">";
                        errorVar += "" + value + "";
                        errorVar += "<a class=\"close\" data-dismiss=\"alert\">×<\/a>";
                        errorVar += "<\/div>";

                        errors.append(errorVar);

                    });

                    if (errors.is(":visible")) {

                        errors.not('.alert-important').delay(7000).fadeOut(350).promise().done(function () {

                            errors.remove().promise().done(function () {

                                $(divAlert).insertAfter(theForm);


                            })

                        });

                    }

                }

            });
            e.preventDefault();
        });
    });
});

例如在初始阶段我会在页面中出现这种情况：

<div id="errors"></div>

如果我最后连续按提交按钮 3 次，在显示错误并删除 div 后，我会在页面中看到这种情况：

<div id="errors"></div>
<div id="errors"></div>
<div id="errors"></div>

在插入这三个元素之前发生的事情是：

<div id="errors" style="display: none;">

我猜这是在脚本的fadeOut(350) 部分。

我想要实现的是如果按下按钮然后等待脚本完成然后能够再次提交。 我不喜欢 timeout 选项，因为我不知道浏览器将花费多少时间来显示错误，然后删除并重新插入错误 div。那么在这部分脚本结束之前，我如何才能禁用后续提交呢？ ->

if (errors.is(":visible")) {

                        errors.not('.alert-important').delay(7000).fadeOut(350).promise().done(function () {

                            errors.remove().promise().done(function () {

                                $(divAlert).insertAfter(theForm);


                            })

                        });

                    }  

Answer 1

您可以通过在 on('submit') 函数之前声明一个变量来跟踪脚本进程，并使用它来限制提交：

jQuery(function ($) {
  $(document).ready(function () {

    var isEnded=true;
    $("#AddModel").on("submit", function (e) {

      if(isEnded){
        isEnded=false;
         .... YOUR CODE
      }

    });
  });
});

当您的特定代码部分结束时，只需添加：

isEnded=true;