AJAX 同步阻碍页面渲染执行

点击按钮后，页面上并没有显示"开始处理..."；而是在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);