浏览器是否显示 HTML 更改或允许在 JavaScript 仍在运行时提交表单？

Question

• 鉴于 JavaScript 正在同步运行（无 setTimeout）以添加或删除 HTML 元素，是否应该在完全完成之前向用户显示 HTML 更改？

• 更重要的是，如果 JavaScript 正在更改可以包含在表单提交中的元素（例如添加多个 textarea 元素），用户可以在进行中单击提交按钮并提交不完整的请求吗？ （一些textarea元素包含在请求中，一些textarea元素没有。）

---

类似这样的： <form action="" method="post"><input type="submit" value="Submit"></form>

当用户提交它时，某些功能恰好在进行中。

function happens_to_be_running_and_user_clicks_submit(){
    the_form_element.insertBefore(document.createElement('textarea'),the_form_element.firstChild).value='first textarea value';
    the_form_element.insertBefore(document.createElement('textarea'),the_form_element.firstChild).value='second textarea value';
}

---

（似乎有很多关于回流会损害性能的讨论。但我仍然不确定是否存在任何要求，或者它可能只是取决于浏览器。尤其是关于提交表单，无论它是否有任何需要做回流或渲染。）

Answer 1

我认为您的困惑可以通过您将示例函数命名为 happens_to_be_running_and_user_clicks_submit 来解释。我假设您希望当用户单击按钮时函数可能正在运行。

这是不可能的。至少在不使用网络工作者的情况下是这样。即便如此，Web Worker 也无法更改 DOM，因此当 Web Worker 将消息发送回主线程以更改 DOM 时，它再次变得不可能了。

Javascript 是单线程的。因此，一次只能发生一件事。当用户执行任何操作（移动窗口、单击按钮、移动鼠标​​......）时，操作系统会将该事件发送到应用程序的事件队列。 Javascript（或者更确切地说，浏览器）读取这个队列来处理事件。但由于它是单线程的，它只在不忙时处理事件。

所以。这给我们留下了两种可能性。

1. 您的函数会在用户单击按钮之前立即执行。然后，当用户单击按钮时，该函数所做的一切都会被渲染并激活。

2. 您的函数以某种方式在用户单击按钮后立即执行。那么当用户单击按钮时，该函数所做的任何事情都不会被激活。

没有第三种状态。要么全有，要么全无。至少不是没有像 setTimeout 或 ajax 这样的异步的东西。