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

解决Ajax同步加载问题
最新推荐文章于 2023-12-05 16:16:22 发布
原创 最新推荐文章于 2023-12-05 16:16:22 发布 · 4.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了Ajax设置为同步(aysnc:false)时导致UI线程阻塞的问题，并提出了解决方案：通过将Ajax设置为异步来确保beforeSend中的UI代码能够正常执行，进而实现loading效果的显示。
如果把ajax设置成同步（aysnc:false），会阻塞UI线程，就导致了beforeSend中的UI代码无法执行，从而加载不出loading效果。只需把ajax设置成异步，即可解决问题。
函数内的ajax同步请求导致遮罩层失效、或者导致loading正在加载提示失效问题
good_good_xiu的博客
02-18 3485
功能需求 编写点击按钮，弹出loading遮罩层提示正在加载中…，同时查询后台信息，拼接数据后渲染到列表时，为了保障渲染时，列表中的数据已经拼接完成。所以在for循环中使用同步ajax进行请求，在success方法中进行拼接。 function showPrintJobList(){ var loadingTip = $('#loading'); loadingTip.show(); for(var i = 0;i < rwid.length;i++){ $.ajax({ url: x
Android 多个请求时LoadingDialog反复显示消失问题的封装思考
qq_32506429的博客
06-01 2292
场景 在开发中一个页面会有多个请求，同时发送，返回时间有快有慢，loading在此时可能会在第一个返回接口时消失，然而其他接口还没返回数据。此时这种jie'k
ajax async=＞false导致浏览器的渲染阻塞,layui的loading不显示
qq_45721579的博客
12-05 1003
浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。
Ajax请求中async导致element组件添加loading失败
yspxiaopanni的博客
10-23 1671
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将浏览器卡死,jQuery Ajax同步参数致使浏览器假死怎么办
weixin_35949256的博客
08-05 1076
俗话说不做死就不会死，今天做死了一回，写了一个比较二逼的函数，遇到了同步Ajax引发的UI线程阻塞问题，在此记录一下。事情原由是这样的，由于页面上有多个类似的异步请求动做，本着提升代码可重用性的原则，我封装了一个名为getData的函数，它接收不一样参数，只负责获取数据，而后把数据return。基本的逻辑剥离出来是这样的：php代码以下复制代码function getData1(){...
ajax数据请求时添加loading
heidongbuhei的博客
12-11 4074
首先在各位阅读本篇博客之前先声明一下，因为我的代码功底还不是很好，所以写出来的代码会比较零散，没有严谨的逻辑，如果各位大佬发现了什么需要修改的地方，欢迎各位大佬批评指教（抱拳） 阿贾克斯在数据请求时添加动画效果有一个前提条件，就是要把异步设置为真（异步请求），因为AJAX异步的设置为假时浏览器的渲染（UI）线程和JS线程是互斥的，在执行JS耗时操作时，页面渲染会被阻塞掉。当我们执行异步AJAX的...
H-ui.admin v3.0 核心组件全解析：9个常用UI控件实现原理与性能优化建议
H-ui.admin v3.0 是一款面向后台管理系统的前端UI框架，其设计融合了模块化架构与高性能交互理念。本文系统剖析该框架的整体架构与核心设计思想，深入探讨常用UI控件的实现机制，涵盖表单、表格、导航等组件的底层...
优化用户体验必看：使用AJAX实现ESP32网页无刷新获取传感器数据（附完整源码）
受限于Wi-Fi通信稳定性与MCU处理能力，传统同步请求模式易导致页面刷新中断，严重影响操作流畅性。此外，传感器数据的实时性要求与前端渲染效率之间的矛盾，进一步加剧了用户体验的不确定性。如何在资源受限环境下...
ajax进行异步请求数据添加loading效果不显示
忘忧
06-03 1506
在做前端页面的时候，发现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 1507
当ajax为同步请求时，谷歌浏览器会停止渲染页面，所有js都会失效，解决办法是改为异步请求 我遇到的情况是多个请求成功完成之后才会执行最后一个方法，解决的办法是在页面里面配置两个hidden域，一个记录第一级请求个数，一个记录成功数（每次记录的时候调用change()方法），当两个数字相等时，进行第二级请求。 转载于:https://www.cnblogs.com/wangyang9629/p/...
ajax提交请求,beforeSend里面的loading不起作用
kwmark的专栏
10-09 3864
原因是ajax的async设置为false时同步提交。浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。也就是你这个问题beforeSend里面好像没有执行。其实，已经进beforeSend里面了。只是,你里面的样式设置被阻塞掉了。解决方案:把它改成异步即可async:true。（默认,就是异步。可以直接省略不写。直接把async:false去掉即可)...
同步数据太多php网页卡死_ajax请求处理中导致页面暂时卡住的问题
weixin_42515024的博客
03-09 793
事情起因是这样的，因为页面上有多个相似的异步请求动作，本着提高代码可重用性的原则，我封装了一个名为getData的函数，它接收不同参数，只负责获取数据，然后把数据return。基本的逻辑剥离出来是这样的：function getData1(){var result;$.ajax({url : "p.php",async : false,success: function(data){result ...
jQuery同步Ajax带来的UI线程阻塞问题及解决方法
u014386474的博客
01-16 1292
遇到了同步Ajax引起的UI线程阻塞问题，在此记录一下。 事情起因是这样的，因为页面上有多个相似的异步请求动作，本着提高代码可重用性的原则，我封装了一个名为getData的函数，它接收不同参数，只负责获取数据，然后把数据return。基本的逻辑剥离出来是这样的： function getData1() {     var result;     $.ajax({       
记一次ajax sync为false 同步神坑bug
zsh
03-23 1543
记一次ajax sync为false 同步神坑bug 记一次项目中想要实现一个转圈圈的等待遮罩层 代码如下： $("#zhezhao").show(); $.ajax({ url:'', data:data, sync:false, done:{ $("#zhezhao").hide(); } }) 自信满满的运行 然而点击查询后页面上什么也没有？？ 以为报错了，然后各种调试输出display的值等 怎么都出不来 但是在浏览器F12调试模式下打断点，
ajax请求造成beforeSend失效
xcc_2269861428的博客
04-30 2486
ajax请求造成beforeSend失效，在常见的就是在请求时加载loading。发现请求耗时较长的时候。loading出不来了。这个问题的主要原因是UI线程阻塞造成的。如何解决这个问题。可以使用$.Deferred解决。 如图： 注意3点： 1、在函数在开始定义$.Deferred 2、defer.resolve(data);必须写入，否则后面的函数回调会不执行 3、返回$.Def...
Ajax出现 beforeSend 和 complete 的方法失效问题（已解决）
Alone_in_的博客
03-18 6295
一、背景 在点击按钮使用 Ajax 提交表单的时候，希望在提交到服务器之前锁定提交按钮（避免重复点击给后台数据库带来脏数据的风险），并提示文件正在处理；在完成与服务器交互后，解锁提交按钮。问题来了，写完后发现beforeSend 和 complete 后面带的方法都失效，没有得到想要的效果。 二、问题解决 （1）、原因： Ajax 的 async 属性被我设置为 fals...
909422229_layUi关于ajax与loading问题
要有梦想，即使遥远
12-18 2987
技术交流群：958923746，有学习视频，文档等。 一、在用户提交ajax后需要将按钮置为不可点击，弹出loading小动画，防止用户重复点击发起请求。 下面采用两种解决这个问题。 一、使用JS锁。 var lock=false; layer.confirm('确认提交吗？', { btn: ['...
ajax同步(async: false)后, 修改页面的css不生效
最新发布
03-11
好的，我现在需要解决用户的问题：使用AJAX同步请求（async: false）后修改页面CSS不生效的问题。首先，我要理解用户的具体情况。用户可能在发送同步AJAX请求后尝试修改页面元素的CSS样式，但发现没有生效。根据用户...
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值