form.submit() 的时间问题答案

【问题标题】：Timing issue with form.submit()form.submit() 的时间问题
【发布时间】：2017-01-24 20:56:55
【问题描述】：

提交表单时似乎存在时间问题，submit() 不会立即运行，并且在表单实际提交之前运行接下来的几行 Javascript。

var eButtons = document.querySelector("#ContactUs_form #buttons");

function submitForm() {
document.getElementById("ContactUs_form").submit();
	eButtons.origInnerHtml = eButtons.innerHTML;
	eButtons.innerHTML = "Saving form...";
}

<form id="ContactUs_form" method="post" action="ContactUs.php" onsubmit="submitForm();">
	<div id="buttons">
		<input id="btnSubmit" name="btnSubmit" type="submit" value="Submit" class="fLeft">
		<input id="btnReset" name="Reset" type="reset" value="Reset" class="fRight">
	</div>
</form>

知道为什么 submit() 没有立即提交表单吗？

编辑：应该更充分地解释一下，表格正在提交，但不是立即提交。 eButtons.innerHTML 替换发生在表单提交之前，因此当表单最终提交时不包含它应该执行的 $_POST("btnSubmit")。

【问题讨论】：

我认为您提交了 2 次表单（删除 document.getElementById("ContactUs_form").submit(); 在 submitForm 函数中）
您希望在提交表单时看到什么？
你没有做任何事情来阻止表单的自然提交。

标签： javascript forms

【解决方案1】：

JavaScript 阻止一切。浏览器不会重新绘制 DOM、运行另一个函数（例如响应事件）或导航到新页面，直到当前函数完成执行。

无论如何，任何导航都是异步的。浏览器必须等到响应开始到达，以防服务器显示204 No Content。只有在收到新页面的响应后，页面才会开始卸载。

【讨论】：