问题描述
我有以下代码.
<!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>
修改为地址您的评论
您不能像这样暂停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提交表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!