原生js异步请求时，无法改变页面样式？

Question

我有一个表单页面，包含上传图片功能。
点击提交按钮时有两个操作：
首先改变提交按钮提示文字：“提交”->“正在提交”。然后异步提交表单内容，并接受回调，做对应处理。

问题：
当图片很大时，点击提交触发事件后，提交按钮提示文字要等到图片提交成功后才会改变。
当打开控制台时，明显看到，如提交图片的接口耗时3s，那么提交按钮的文字要在点击提交3s后才会改变为“正在提交 ”，紧接着弹出回调提示"提交成功"。
代码不方便贴，提交方法是原生js（不是用vue等框架）的formData->ajax方式提交。

我目前的解决方式是在提交方法内给异步事件加一个延时setTimeout。但是我仍然没有搞明白为什么不加延时时，异步提交数据会阻断页面渲染？

Answer 1

答案在这里，通俗解释，就是，
innerHTML 操作是及时的，但是页面渲染是延后的，等js 代码执行完后，有空闲，页面才渲染，所以会导致看起来innerHTML 后的代码已经被行了，但是页面还没有改变，，，实际上DOM已经改变了，但是还没有渲染到页面上去
举个例子

document.body.innerHTML = 'text';
alert(document.body.innerHTML);// you will see a 'text' alert

你会先收到弹窗，但是弹窗内容验证了前面的代码已经执行了，但是页面上你会发现，还没有改变，就是这种情况。

你操作 innerHTML ,修改了DOM，但是后面的JS代码会继续执行，等代码执行完了，进程空闲，页面才会渲染，你才会发现 innerHTML 改变了，所以看起来有延迟。

解决方法：

操作 innerHTML 的代码放在一个函数先执行，其他的代码放在另一个函数执行