ajax同步导致ajax上面的代码不执行？

Posted 2020-09-21 tapt

js代码：
环境:IE11
要求:点击一个按钮后，页面xxx的地方立即显示"开始处理..."，直到ajax处理结束后，xxx内容才更新为新的处理结果；
点击事件执行代码如下:
xxx.innerhtml="开始处理...";
$.ajax(...async:false,...);//ajax同步
问题：
点击按钮后，页面上并没有显示"开始处理..."；而是在ajax执行完后，页面xxx位置直接显示处理后的结果；
个人解析:
js执行innerHTML到页面显示"开始处理..."是2个动作，一个是js执行，一个是浏览器渲染，中间有个时间差，
js执行完innerHTML后，页面上还没来得及显示"开始处理..."时，js就执行到了ajax部分，而ajax同步会导致锁定浏览器，表现为页面内容不会更改；
当ajax执行回调函数时，对xxx内容进行二次赋新值，所以在"开始处理..."还未显示时，由于此时xxx已经更新为新值，页面之后直接显示为新值；
如何让页面在执行ajax期间显示innerHTML中的内容"开始处理..."？
设置1个定时器，在innerHTML后延迟100ms再执行ajax；即：
xxx.innerHTML="开始处理...";
setTimeout(function(){
 $.ajax(...async:false,...);//ajax同步
},100);