使用 setTimeout 提交的表单无法按预期工作

Question

我在提交事件处理程序中基于条件和 setTimeout 语句提交表单，但是即使我在 setTimeout 函数中设置 return false，表单仍然被提交。

bool = true;
$('.form-example').submit(function(e) { 
    //some_stuff where I am get a value true or false in variable bool
    setTimeout(function () {      
        if(bool) {    
            console.log('form shouldnt submit coz the following statement is return false');
            return false; 
        }else{
            return true;
        }
    }, 1000);           
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" method="post" class="form-example">
        <div class="form-example">
            <label for="name">Enter your name: </label>
            <input type="text" name="username" id="username" required> 
        </div>
        <input type="submit" name="submit_user">
    </form>

Answer 1

bool = false;
$('.form-example').submit(function(e) { 
    e.preventDefault();
    //some_stuff where I am get a value true or false in variable bool
        if(bool) {    
            alert('Not submit');
            return false; 
        }else{
            alert('Submit');
            $(this).unbind("submit").submit();
            return true;
        }         
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" class="form-example">
        <div class="form-example">
            <label for="name">Enter your name: </label>
            <input type="text" name="username" id="username" required> 
        </div>
        <input type="submit" name="submit_user">
    </form>

Answer 2

仅当您不想提交表单时才应使用 e.preventDefault()。

var bool = false;
$('.form-example').submit(function(e) { 
    //some_stuff where I am get a value true or false in variable bool
    if(bool) {    
        alert('Not submit');
         e.preventDefault();
         return false; 
    } else {
         alert('Submit');
        return true;
    }         
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" class="form-example">
        <div class="form-example">
            <label for="name">Enter your name: </label>
            <input type="text" name="username" id="username" required> 
        </div>
        <input type="submit" name="submit_user">
    </form>

使用 setTimeout 提交的表单无法按预期工作

form submit with setTimeout not working as expected

html

javascript

forms

jquery

submit