带有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

只有当您不想提交表单时，才应该使用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>

Answer 2

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>