如何在按钮单击操作开始之前完成onblur验证的定时器超时/间隔？

Question

我有一个文本框和一个按钮，执行一些所需的操作很费时。 Ajax精确地调用服务器。在文本框的onblur事件中，我正在使用唯一标识符从数据源中获取一个人的名字，该标识符包括对执行所需命令的数据源打开一个事务，以获取输出并显示在文本中。

单击按钮时，我正在使用类似方法提交更新。现在，由于ajax调用需要一些时间来发布更新并获取输出。当我在文本框中输入ID，然后在焦点位于文本框上时直接单击按钮。在验证发生之前执行按钮上的调用的任何想法如何在按钮单击提交调用之前进行验证？

这里有一些伪代码：

@Html.TextBox("myTextbox", null, new { @class = "textbox"})
<button id="btnSubmit"> submit </button>

模糊事件（验证）上的我的Ajax调用看起来像：

 $(document).on('blur', '#myTextbox', function () {
        if ($.trim($(this).val()) != '') {
            $.ajax({
                async: true,
                type: "POST",
                url: "/Index/ValidateUser",
                data: {
                    CAI: $('#myTextbox').val()
                },
                dataType: 'json',
                success: function (response) {
                      $('#myTextbox').val(response.username);
                    }
                }
            });
        }
    });

单击事件（提交）上的“我的Ajax调用看起来像：]

$(document).on('click', '#btnSubmit', function() {
   if ($.trim($('#myTextbox').val()) != '') {
      $.ajax({
            async: true,
            type: "POST",
            url: "/Index/Submit",
            data: {
               CAI: $('#myTextbox').val()
            },
            dataType: 'json',
            success: function(response) {
               alert(response.successMessage);
            }
         }
      });
    }
});

我无法理解为什么在模糊验证之前通过单击按钮而不在文本框处于焦点状态时单击任何其他位置来在进行模糊验证之前进行按钮单击提交操作。我假设如果我在按钮ajax调用之前添加某种时间间隔，则只有在模糊ajax调用完成后才可能触发。但是，如果有更好的解决方案可用，我愿意学习。

Answer 1

因此，根据我对问题的了解，您正在通过ajax调用验证文本框的模糊性。并单击按钮，如果它经过验证，您想对其进行更新。但是，当您单击按钮时，将使文本框突出显示，您的更新调用将在验证调用之前直接执行。

为了确保您在更新前进行验证，请使用变量作为标志。在成功的验证ajax调用中设置标志

$(document).on('blur', '#myTextbox', function () {
    if ($.trim($(this).val()) != '') {
        $.ajax({
            async: true,
            type: "POST",
            url: "/Index/ValidateUser",
            data: {
                CAI: $('#myTextbox').val()
            },
            dataType: 'json',
            success: function (response) {
                  $('#myTextbox').val(response.username);
                  validateFlag = 1
                }
            }
        });
    }
});

检查更新ajax调用中的标志，并且仅在经过验证的情况下进行更新

$(document).on('click', '#btnSubmit', function() {
   if ($.trim($('#myTextbox').val()) != '' && validateFlag == 1) {
      $.ajax({
            async: true,
            type: "POST",
            url: "/Index/Submit",
            data: {
               CAI: $('#myTextbox').val()
            },
            dataType: 'json',
            success: function(response) {
               alert(response.successMessage);
            }
         }
      });
    }
});

还要确保取消设置文本框的标志onchange事件，以便每次更改时都需要再次验证

$(document).on('change', '#myTextbox', function () {
     validateFlag = 0
});