smz_94
2021-03-16 15:22
采纳率: 100%
浏览 99

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");
})
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 意绮行 2021-03-16 15:38
    已采纳

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

     

    已采纳该答案
    打赏 评论
  • 代码的灵魂是bug! 2021-03-16 15:25
    打赏 评论
  • 土拨鼠1号 2021-03-16 15:51
    async function test1() {
          await function test2() {
              $('xx').hide();
              ...
              alert('22');
           }
        }

    不知道是不是这个意思

    打赏 评论
  • AllPromise 2021-03-16 16:23

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

    打赏 评论

相关推荐 更多相似问题