javascript async等待使用Promise使用onsubmit提交表单 [英] javascript async await Submitting a form with onsubmit using Promise
问题描述
我有以下代码.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function sleep( lf_ms ) {
return new Promise( resolve => setTimeout( resolve, lf_ms ) );
}
async function check_form() {
alert( 'Test 1' );
await sleep( 1000 );
alert( 'Test 2' );
return false;
}
</script>
</head>
<body>
<form name="myform" method="post" action="test.htm" onsubmit="return check_form();">
<input type="text" name="city"><br>
<br>
<a href="javascript:check_form();">check the method call via link</a><br>
<br>
<button type="submit">check the method call via submit button</button><br>
<br>
</form>
</body>
</html>
我想将功能check_form()睡眠1秒钟.
I want to sleep the function check_form() for 1 second.
如果单击链接，将显示测试1"和测试2".如果单击提交按钮，则仅显示测试1".我在这里做什么错了?
If I click on the link, "Test 1" and "Test 2" will be displayed. If I click the submit button only "Test 1" is displayed. What am I doing wrong here?
我的问题不同于使用Promise提交带有Submit()的表单.因为未使用javascript事件处理程序onsubmit.
My question is different from Submitting a form with submit() using Promise. Because the javascript event handler onsubmit is not used.
推荐答案
return check_form()不会像您想象的那样返回false. 异步函数始终返回隐式 Promise ，因此，您的表单仍然是已提交.之所以显示第一个alert，是因为到目前为止，它仍然是同步的. sleep之后的所有内容都将安排在以后的时间，并且表单提交不会等待该时间.
The return check_form() does not return false as you might think. Async functions always return an implicit Promise and therefore, your form is still submitted. The first alert shows up because up to that moment it is still synchronous. Everything after the sleep will be scheduled for a later time and the form submission will not wait for that.
要解决该问题，可以调用该函数，然后然后返回false.
To resolve it you can call the function and then return false.
function sleep(lf_ms) {
return new Promise(resolve => setTimeout(resolve, lf_ms));
}
async function check_form() {
console.log('Test 1');
await sleep(1000);
console.log('Test 2');
}
<form name="myform" method="post" onsubmit="check_form(); return false;">
<input type="text" name="city"><br>
<br>
<a href="javascript:check_form();">check the method call via link</a><br>
<br>
<button type="submit">check the method call via submit button</button><br>
<br>
</form>
修改为地址您的评论
在功能check_form中检查用户输入.如果输入无错误，则该函数返回true.如果有错误，该函数将返回false.如果发生错误，则不应调用存储在标签表单的属性操作中的页面.
User input is checked in the function check_form. If the inputs are error-free, the function returns true. If there are errors, the function returns false. In the event of an error, the page that is stored in the attribute action of the tag form should not be called.
您不能像这样暂停JavaScript，但是可以使用return false停止提交，然后在验证后通过JavaScript提交表单.
You can't pause JavaScript like that, but you can use return false to stop the submission and then after your validation, submit the form via JavaScript.
function sleep(lf_ms) {
return new Promise(resolve => setTimeout(resolve, lf_ms));
}
async function check_form(form) {
console.log('Test 1');
await sleep(1000);
console.log('Test 2');
let city = document.getElementById('city').value;
// Validation
if (form !== undefined && city.trim() !== "") {
// Validation succeeded, submit the form
form.submit();
}
}
<form name="myform" method="post" onsubmit="check_form(this); return false;">
<input type="text" id="city" name="city"><br>
<br>
<a href="javascript:check_form();">check the method call via link</a><br>
<br>
<button type="submit">check the method call via submit button</button><br>
<br>
</form>
这篇关于javascript async等待使用Promise使用onsubmit提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
