Javascript 表单在我可以更改HTML之前提交

我试图阻止表单自动提交，然后使用JavaScript将表单替换为告诉用户服务器正在处理表单的文本，在服务器上我的“post”路径中的回调中，用户在处理完表单信息后被发送到结果页面。 但是在span出现在HTML中之前，表单已经提交，页面正在等待服务器的响应。 如果我插入一个超时函数，我可以强制span元素在表单提交之前出现，但是必须有更好的方法来做到这一点。 我尝试使用

async await.then（）

，但也不起作用-可能在提交表单之前加载span无法完成渲染谢谢

HTML和JS：

var proc=async（）=>{
var form=document.getElementById（'form'）；
form.style.display='none'；
var span=document.getElementById（'testSpan'）；
span.style.display='block'；
//使用此超时，我可以使span元素出现
//window.setTimeout（（）=>{
//document.getElementById（'form'）.submit（）
//}, 500);
}
var btn=document.getElementById（'submitBTN'）；
btn.addEventListener（'click'，async（）=>{
等待proc（）.then（document.getElementById（'form'）.submit（））；
})

处理。。。

如果您想在发布到服务器之后以及显示其结果页面之前继续处理，Ajax是最简单的方法。通常，人们宁愿在发布前进行预处理，然后让服务器几乎立即初始化一个新页面

在时间间隔内，要在运行过程或预处理期间渲染任何新显示，必须使运行停止并继续。最简单的方法是使用0 ms的

setTimeout

的技巧：修改要显示的内容，对剩余进程执行

setTimeout

并结束该主进程；有点像：

//更改为显示
form.style.display='none'；
span.style.display='block'；
//将剩余的进程作为渲染后的
设置超时（（）=>{
//剩余过程
}, 0 );
//主进程结束，因此浏览器渲染

---

如果你想在这个过程中多次渲染，我会给你一个更完整的答案。

使用async和wait并不能使事情变成承诺。要使用承诺，您必须返回一个承诺

在你的事业中，你仍然需要使用超时。最后，它与您在超时时调用submit并没有什么不同

var proc=async（）=>{
document.body.classList.add（“提交”）；
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
解决（）；
}, 500);
});
}
var btn=document.getElementById（'submitBTN'）；
btn.addEventListener（'单击'，（）=>{
proc（）.then（（）=>document.getElementById（'form'）.submit（））；
})

#testSpan，
.提交表格{
显示：无；
}
.提交#测试span{
显示：块；
}

处理。。。

因为您正在调用submit方法，并且它返回的内容被分配给then

.then（（）=>document.getElemen….

感谢您的回复。好的，您的回复让我认为我应该使用

返回document.getElementById（'form'）.submit（）；

在

proc（）

的末尾，然后将其传递给.then（），但form.submit（）在span出现之前仍然发生。我误解了什么？是的，在提交之前，浏览器必须停止javascript来呈现span。是的，你是对的：停止、呈现然后继续的唯一方法是使用

setTimeout（提交，0）

。就像渲染一样，在脚本停止运行之前，等待的承诺是无法实现的。哦，我忽略了一个事实，即您的方法中没有实际的异步代码……这是没有承诺的。