首页 > 技术文章 > ajax同步导致ajax上面的代码不执行?

tapt 2017-06-02 15:58 原文

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);

推荐阅读