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

Question

前端小白求教，在页面点击按钮后执行两个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");
})

Answer 1

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