点击按钮后，页面上并没有显示"开始处理..."；而是在ajax执行完后，页面xxx位置直接显示处理后的结果
要求:点击一个按钮后，页面xxx的地方立即显示"开始处理..."，直到ajax处理结束后，xxx内容才更新为新的处理结果；
点击事件执行代码如下:
$('.static').on('click', 'li', function() {
$(this).toggleClass('active');
showLoading();
$.ajax({
url: ajaxUrl,
type: 'post',
dataType: 'json',
async: false,
data: {},
success: function(data) {
hideLoading();
if (data && data.status == '1') {
} else {
$('.nodata').show();
}
}
});
});
问题原因
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);
