js函数执行过程中操作元素怎样才能实时生效？

前端小白求教，在页面点击按钮后执行两个ajax请求时，为了避免页面就此呆住，想在执行ajax的时候置灰按钮，同时显示进度条，结束以后隐藏进度条，重置按钮可用，于是写成了如下这样。

测试时发现ajax之前的操作完全没有生效，只打印了alert的内容，整个函数跑完后，才会执行最后两句，求教，请问是这样写有问题吗？正确写法应该是怎样的？浏览器是safari

$("#btn").click(function(){
	$("#progressbar").show();
	$("#btn").attr("disabled",true);
	alert("11");
	$.ajax({
	 	async:false,
	       ...
	}); 
	$.ajax({
		 async:false,
	       ...
	});
	$("#progressbar").hide();
	$("#btn").attr("disabled",false);
	alert("22");
})

很久以做过Web开发,   对于JS来说，真正刷新UI是本次事件结束之后浏览器才做渲染处理，你上面的代码由于使用同步方式进行网络请求，因此本次事件一直被ajax阻塞，在之前的UI逻辑虽然调用了但没有被浏览器进行渲染。你如果要做的话，可以在click中进行UI逻辑处理显示xx之后，调用timeoutfunction（ajaxXXX，0）使用下一次的事件触发来进行ajax请求并在请求成功后隐藏UI。 这样应该能满足你的需要。

https://www.cnblogs.com/fanyong/p/3883670.html

async function test1() {
      await function test2() {
          $('xx').hide();
          ...
          alert('22');
       }
    }

不知道是不是这个意思

浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。