如何在按鈕單擊操作開始之前為 onblur 驗證設置超時/間隔以完成？

Question

我有一個文本框和一個按鈕，可以執行一些耗時的所需操作。 准確地說，Ajax 調用服務器。 在文本框的 onblur 事件中，我使用唯一標識符從數據源中獲取一個人的姓名，其中包括向數據源打開事務，執行獲取 output 並顯示在文本中的所需命令。

單擊按鈕時，我正在使用類似的方法提交更新。 現在，因為 ajax 調用需要一些時間來發布更新並獲取 output。 當我在文本框中輸入 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
});