javascript - 防止多次执行JS函数/表单提交

Question

我使用的表单具有单个输入，如下所示:

<form action="" method="POST" id="myForm" name="myForm">
    <input type="text" name="myInput" id="myInput" maxlength="9" OnKeyPress="checkMyForm();" onKeyUp="checkMyForm();" onChange="checkMyForm();" />
    <button id="btnSubmit" class="btnSubmit" >Submit</button>
</form>

JS 函数检查输入，如果满意，则等待 1.25 秒，然后提交表单，如下所示:

function checkMyForm () {
var input = document.getElementById("myInput");
var form = document.getElementById("myForm");
    if ( /* check the input here */) {
        setTimeout(function() {
            // submit the form
            $("#myForm").submit(); }, 1250);
        }
     else {
        // do nothing
    }
}

if 语句检查 for 输入的长度。如果我输入(7 个字符) - 它会执行 6-7 次。如果我粘贴它 - 它会执行两次。有没有办法阻止多重表单提交？

我已经准备好了:

$(document).ready(function() {
    $("#myForm").submit(function(event) {
        // disable the submit/print button
        document.getElementById('btnSubmit').disabled = true;
        // prevent resubmission of the form
        $(this).submit(function() {
            return false;
        });

        // prevent page refresh
        event.preventDefault();

        // contineu with my stuff to submit the form
        $.ajax({
            url: 'index.php',
            type: 'post',
            data: {
                "myInput" : $('#myInput').val(),
            },
            success: function(response) {
                if(!alert(response)) {
                    // do my thing here
                }
            }
        });
    }
}

这会阻止实际运行 PHP 端代码来提交表单；但无论如何都会触发警报(如果粘贴则触发两次，如果输入则触发5-7次)。如何防止多次提交和回复返回？

Answer 1

我假设您的 checkMyForm() 函数实际上是您的 check_promisLot() 函数，您应该更改它。

你尝试过clearTimeout吗，它会是这样的；

var delayExec; 

function check_promisLot () {
    clearTimeout(delayExec);
    var input = document.getElementById("myInput");
    var form = document.getElementById("myForm");
        if ( /* check the input here */) {
            delayExec = setTimeout(function() {
                // submit the form
                $("#myForm").submit(); }, 1250);
            }
         else {
            // do nothing
        }
}

本质上，每次发生更新触发事件时都尝试重置计时器。