在 Javascript 上完成提交之前等待待處理的請求

Question

我在 web 應用程序 (javascript-jQuery) 上有以下情況：

• 使用https://jquerytools.org/驗證器的表單
• 在表單中有一個來自https://github.com/RobinHerbots/Inputmask的 [required] masked input（銀行賬戶），它會在發生更改事件時向服務器發出請求，並且在請求期間禁用輸入以避免修改。

提交表格時，有時，當銀行賬戶為空時，不會檢查“必需”驗證。 經過瘋狂的調試后，我看到輸入掩碼控件正在觸發一個更改事件，因此，請求被拋給服務器（因此輸入被禁用），並且驗證器沒有驗證所需的，因為它有一個條件，即禁用的字段未被驗證。

我會“暫停”驗證，直到所有請求都完成，但我還沒有找到在庫外執行此操作的方法。 關於如何在不修改外部庫（“jquery inputmask”和“jquery tools”）的情況下解決這個問題的想法？

Answer 1

最后我選擇了以下解決方案：

• 跟蹤表單何時提交
• 跟蹤何時有待處理的請求

當按下提交按鈕時，在提交前檢查是否有待處理的請求。 我使用 javascript 間隔每 200 毫秒檢查一次（並且在最多 10 個間隔期間以避免錯誤跟蹤未提交 forms）。

另一方面，我在服務器上發送規則請求之前檢查表單是否正在提交。 如果表單正在提交，我不計算規則。

我發布了適應理解的代碼。

Function 查詢表單提交：

// Check the form submit
$(".submitButtom", ctl).click(function (e) {
    var $form = $(this).closest('form');
    var areServerRulesRunning = $.mpm.formengine.genericRules.runningServerRules > 0;
    if (areServerRulesRunning) {
        // If are server rules running keep checking before submit
        var retries = 10;
        var interval = setInterval(function() {
            if ($.mpm.formengine.genericRules.runningServerRules <= 0 || retries < 0) {
                clearInterval(interval);
                // variable to track the submission of the form
                $.mpm.formengine.form.submitting = true;
                $form.submit();
            }
            retries--;
        }, 200);
    }
    else {
        $form.submit();
    }
});
// Later on a callback after submit (don't published): $.mpm.formengine.form.submitting = false;

Function 在輸入更改時執行服務器規則：

...
// Rule execution
serverCalculationRule: function (wfName, $sourceInput, controlScope, ruleData) {

    if ($.mpm.formengine.form.submitting === true) {
        // If the form is submitting don't send the request to the server
        return;
    }

    $.mpm.formengine.genericRules.runningServerRules++;
    $.post($.mpm.Constants.FormEngine.UrlDoAction, doActionData,
        function (data) {
            // SUCCESS
        }
    )
    .always(function () {
        // ALWAYS
        $.mpm.formengine.genericRules.runningServerRules--;

    });
},
...