ajax同步（async: false）阻塞UI线程导致loading效果失效。

最新推荐文章于 2023-12-05 16:16:22 发布
最新推荐文章于 2023-12-05 16:16:22 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cblstc/article/details/79070897
版权
本文探讨了Ajax设置为同步(aysnc:false)时导致UI线程阻塞的问题，并提出了解决方案：通过将Ajax设置为异步来确保beforeSend中的UI代码能够正常执行，进而实现loading效果的显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如果把ajax设置成同步（aysnc:false），会阻塞UI线程，就导致了beforeSend中的UI代码无法执行，从而加载不出loading效果。只需把ajax设置成异步，即可解决问题。
发送ajax将浏览器卡死,jQuery Ajax同步参数致使浏览器假死怎么办
weixin_35949256的博客
08-05 1037
俗话说不做死就不会死，今天做死了一回，写了一个比较二逼的函数，遇到了同步Ajax引发的UI线程阻塞问题，在此记录一下。事情原由是这样的，由于页面上有多个类似的异步请求动做，本着提升代码可重用性的原则，我封装了一个名为getData的函数，它接收不一样参数，只负责获取数据，而后把数据return。基本的逻辑剥离出来是这样的：php代码以下复制代码function getData1(){...
ajax数据请求时添加loading
heidongbuhei的博客
12-11 4013
首先在各位阅读本篇博客之前先声明一下，因为我的代码功底还不是很好，所以写出来的代码会比较零散，没有严谨的逻辑，如果各位大佬发现了什么需要修改的地方，欢迎各位大佬批评指教（抱拳） 阿贾克斯在数据请求时添加动画效果有一个前提条件，就是要把异步设置为真（异步请求），因为AJAX异步的设置为假时浏览器的渲染（UI）线程和JS线程是互斥的，在执行JS耗时操作时，页面渲染会被阻塞掉。当我们执行异步AJAX的...
ajax async=＞false导致浏览器的渲染阻塞,layui的loading不显示
最新发布
qq_45721579的博客
12-05 845
浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。
Ajax请求中async导致element组件添加loading失败
yspxiaopanni的博客
10-23 1591
element组件添加加载loading状态，我想只要是程序员都应该知道，不知道的可以看element组件官网http://element-cn.eleme.io/#/zh-CN/component/installation。 我这边主要介绍async的作用以及为什么element添加加载loading状态会失败。（因为这个添加loading这个简单的任务我做了整整一天，最后发现与Ajax请求的...
Jquery ajax 同步阻塞引起的UI线程阻塞的坑（loading图片显示不出来，layer.load延迟）
热门推荐
lianzhang861的博客
03-02 1万+
    今天想做一个点击地市用ajax重新获取数据刷新页面功能，因为ajax属于耗时操作，想在获取数据且加载页面时显示加载遮罩层，结果发现了ajax的好多坑。        例如如上栗子，我想点击按钮让遮罩层显示，ajax加载完毕后遮罩层消失。因为我想让loadChart()在赋值操作后执行，但如果async设为true时，往往会先执行loadChart(),之后才会赋值，所以我只能将ajax设为...
ajax进行异步请求数据添加loading效果不显示
忘忧
06-03 1451
在做前端页面的时候，发现loading效果不显示；即使将loading代码放在ajax请求的前面也不行； 代码是这样的： (function(){ mui.init(); mui.showLoading() $('.mui-show-loading .text').html('拼命加载中...');//加载提示语 mui.ajax({ url: 'url', type: 'post', async: false, d
ajax同步时，loading加载不显示（谷歌浏览器）
weixin_30682127的博客
01-04 1479
当ajax为同步请求时，谷歌浏览器会停止渲染页面，所有js都会失效，解决办法是改为异步请求 我遇到的情况是多个请求成功完成之后才会执行最后一个方法，解决的办法是在页面里面配置两个hidden域，一个记录第一级请求个数，一个记录成功数（每次记录的时候调用change()方法），当两个数字相等时，进行第二级请求。 转载于:https://www.cnblogs.com/wangyang9629/p/...
ajax提交请求,beforeSend里面的loading不起作用
kwmark的专栏
10-09 3830
原因是ajax的async设置为false时同步提交。浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。也就是你这个问题beforeSend里面好像没有执行。其实，已经进beforeSend里面了。只是,你里面的样式设置被阻塞掉了。解决方案:把它改成异步即可async:true。（默认,就是异步。可以直接省略不写。直接把async:false去掉即可)...
【Layui搜索性能优化秘笈】：6招提高响应速度
Layui作为一个流行的前端UI框架，其搜索性能优化对于提升用户体验和系统响应速度至关重要。本文首先介绍了Layui搜索性能优化的基础知识和重要性，随后探讨了前端性能优化的基础技巧，包括页面加载速度和常规优化方法...
性能优化秘籍：AdminLTE 3.2.0加载速度与响应时间提升术
!... # 摘要 本文探讨了AdminLTE 3.2.0版本的性能问题，并基于前端性能优化原则提供了理论和实践相结合的解决方案。首先概述了性能优化的重要性，包括用户体验的影响因素和优化目标，接着阐述了性能度量标准和前端优化...
原生JS实现天气预报：云端数据缓存与加速技术揭秘
!... # 摘要 本文主要探讨了通过原生JS实现天气预报功能，并充分利用云端数据缓存与加速技术优化用户体验。首先介绍原生JS实现天气预报的背景与基本概念，随后深入分析云端数据缓存的技术细节及其在提升系统性能方面的...
同步数据太多php网页卡死_ajax请求处理中导致页面暂时卡住的问题
weixin_42515024的博客
03-09 756
事情起因是这样的，因为页面上有多个相似的异步请求动作，本着提高代码可重用性的原则，我封装了一个名为getData的函数，它接收不同参数，只负责获取数据，然后把数据return。基本的逻辑剥离出来是这样的：function getData1(){var result;$.ajax({url : "p.php",async : false,success: function(data){result ...
jQuery同步Ajax带来的UI线程阻塞问题及解决方法
u014386474的博客
01-16 1231
遇到了同步Ajax引起的UI线程阻塞问题，在此记录一下。 事情起因是这样的，因为页面上有多个相似的异步请求动作，本着提高代码可重用性的原则，我封装了一个名为getData的函数，它接收不同参数，只负责获取数据，然后把数据return。基本的逻辑剥离出来是这样的： function getData1() {     var result;     $.ajax({       
记一次ajax sync为false 同步神坑bug
zsh
03-23 1494
记一次ajax sync为false 同步神坑bug 记一次项目中想要实现一个转圈圈的等待遮罩层 代码如下： $("#zhezhao").show(); $.ajax({ url:'', data:data, sync:false, done:{ $("#zhezhao").hide(); } }) 自信满满的运行 然而点击查询后页面上什么也没有？？ 以为报错了，然后各种调试输出display的值等 怎么都出不来 但是在浏览器F12调试模式下打断点，
ajax请求造成beforeSend失效
xcc_2269861428的博客
04-30 2440
ajax请求造成beforeSend失效，在常见的就是在请求时加载loading。发现请求耗时较长的时候。loading出不来了。这个问题的主要原因是UI线程阻塞造成的。如何解决这个问题。可以使用$.Deferred解决。 如图： 注意3点： 1、在函数在开始定义$.Deferred 2、defer.resolve(data);必须写入，否则后面的函数回调会不执行 3、返回$.Def...
Ajax出现 beforeSend 和 complete 的方法失效问题（已解决）
Alone_in_的博客
03-18 6157
一、背景 在点击按钮使用 Ajax 提交表单的时候，希望在提交到服务器之前锁定提交按钮（避免重复点击给后台数据库带来脏数据的风险），并提示文件正在处理；在完成与服务器交互后，解锁提交按钮。问题来了，写完后发现beforeSend 和 complete 后面带的方法都失效，没有得到想要的效果。 二、问题解决 （1）、原因： Ajax 的 async 属性被我设置为 fals...
函数内的ajax同步请求导致遮罩层失效、或者导致loading正在加载提示失效问题
good_good_xiu的博客
02-18 3268
功能需求 编写点击按钮，弹出loading遮罩层提示正在加载中…，同时查询后台信息，拼接数据后渲染到列表时，为了保障渲染时，列表中的数据已经拼接完成。所以在for循环中使用同步ajax进行请求，在success方法中进行拼接。 function showPrintJobList(){ var loadingTip = $('#loading'); loadingTip.show(); for(var i = 0;i < rwid.length;i++){ $.ajax({ url: x
909422229_layUi关于ajax与loading问题
要有梦想，即使遥远
12-18 2954
技术交流群：958923746，有学习视频，文档等。 一、在用户提交ajax后需要将按钮置为不可点击，弹出loading小动画，防止用户重复点击发起请求。 下面采用两种解决这个问题。 一、使用JS锁。 var lock=false; layer.confirm('确认提交吗？', { btn: ['...
ajax中async: false是什么
03-16
async: false是ajax中的一个参数，它表示是否异步执行请求。当async为false时，请求将会同步执行，即在请求完成之前，浏览器将会被锁定，用户无法进行其他操作。这种方式一般不推荐使用，因为会影响用户体验。而当...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值