jQuery同步Ajax带来的UI线程阻塞问题及解决方法
遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下。
事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return。基本的逻辑剥离出来是这样的:
var result;
$.ajax({
url: "p.php",
async: false,
success: function(data) {
result = data;
}
});
return result;
}
var data = getData1();
alert(data);
});
接下来,要加另外一个功能,由于ajax请求有一定的耗时,所以我需要在发出请求前页面有个loading效果,即显示一张“正在加载”的gif图片,想必大家也都见过。所以我的处理函数就变成了这样:
$(".loadingicon").show();
var data = getData1();
$(".loadingicon").hide();
alert(data);
});
sleep(3);
echo ("aaaaaa");
?>
浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使我的DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线程阻塞,不给它执行的时间。这就是代码失效的原因。
setTimeout解决阻塞问题
既然明白了问题在哪里,我们就来针对性想办法。为了不让同步ajax请求阻塞线程,我想到了setTimeout,把请求的代码放到sestTimeout中,让浏览器重启一个线程来操作,不就解决问题了吗?于是乎,我的代码就变成了这样:
$(".btn2").click(function() {
setTimeout(function() {
$.ajax({
url: "p.php",
async: false,
success: function(data) {
$(".loadingicon").hide();
alert(data);
}
});
}, 0);
});
setTimeout的第二个参数设为0,浏览器会在一个已设的最小时间后执行。不管三七二十一先运行起来看看。
结果loading图片显示出来了,但是!!!图片怎么不动呢,我明明是一张动态gif图。这个时候我很快就想到了,虽然同步请求延迟执行了,但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼,连gif图片都不动了,看起来像一张静态图片一样。
结论很明显,setTimeout治标不治本,相当于把同步请求“稍稍”异步了一下,接下来还是会进入同步的噩梦,阻塞线程。方案失败。
是时候用Deferred了
jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。详情可参看阮一峰老师的这篇文章http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html。
于是我用Deferred对象改写了代码,如下:
function getData3() {
$.ajax({
url: "p.php",
//async : false,
success: function(data) {
defer.resolve(data)
}
});
return defer.promise();
}
$(".btn3").click(function() {
$(".loadingicon").show();
$.when(getData3()).done(function(data) {
$(".loadingicon").hide();
alert(data);
});
});
可以看到我在ajax请求中去掉了async:false,也就是说,这个请求又是异步的了。另外请注意success函数中的这一 句:defer.resolve(data),Deferred对象的resolve方法可传入一个参数,任意类型。这个参数可以在done方法中拿到, 所以我们异步请求来的数据就可以以这样的方式来返回了。
至此,问题得到了解决。Deferred对象如此强大且方便,我们可以好好利用它。
最后说明:本篇文章摘自其他站点,仅用来作为一个记录(自己的整理能力略弱:))
jQuery同步Ajax带来的UI线程阻塞问题及解决方法的更多相关文章
- jQuery同步Ajax带来的UI线程阻塞问题及解决办法
俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则 ...
- jQuery同步Ajax带来的UI线程阻塞问题
一.需求 在调ajax接口的时候因为有时间延迟,想要做一个loading加载的效果,等数据返回时再把loading的效果去掉. 所以我在调ajax的代码块前面加了显示loading效果的代码,ajax ...
- 【jquery】ajax 请求成功后新开窗口被拦截解决方法
问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以 ...
- Jquery ajax 同步阻塞引起的UI线程阻塞的坑(loading图片显示不出来,layer.load延迟)
今天想做一个点击地市用ajax重新获取数据刷新页面功能,因为ajax属于耗时操作,想在获取数据且加载页面时显示加载遮罩层,结果发现了ajax的好多坑. 例如如上栗子,我想点击按钮让遮罩层显示,ajax ...
- Android Studio学习随笔-UI线程阻塞以及优化
我们在使用手机的时候,经常会遇到一个问题:先是卡死,然后跳出该程序无响应,是否关闭的提示(当然有可能是我们手机性能太差=.=)这是因为线程的阻塞引起的,在这里我讲述一下UI线程,一般处理程序会在UI线 ...
- 第10讲- UI线程阻塞及其优化
第10讲UI线程阻塞及其优化 .UI 阻塞demo (首先在activity_main.xml中放置两个button,分别命名为button1,button2) //首先设置一个button1用来进行 ...
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法 方法1:使用ajaxStart方法定义一个全局的“加 ...
- 需要我们了解的SQL Server阻塞原因与解决方法
需要我们了解的SQL Server阻塞原因与解决方法 上篇说SQL Server应用模式之OLTP系统性能分析.五种角度分析sql性能问题.本章依然是SQL性能 五种角度其一“阻塞与死锁” 这里通过连 ...
- mysql主从同步失败Last_IO_Error: Got fatal error 1236 from master解决方法
mysql教程主从同步失败Last_IO_Error: Got fatal error 1236 from master解决方法 遇到这样的错误如:“Last_IO_Error: Got fatal ...
随机推荐
- How to transfer developer profile to one mac to another mac
Export developer profile from old mac. In the Xcode Organizer, select your team in the Teams section ...
- javaweb获取项目路径的方法
在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getPro ...
- 认识Hadoop
概述 开源.分布式存储.分布式计算 大数据生态体系 特点:开源.社区活跃 囊括了大数据处理的方方面面 成熟的生态圈 推荐系统 应用场景 搭建大型数据仓库,PB级数据的存储.处理.分析.统计 日志分析 ...
- 水池问题的lua语言算法(面试题分析:我的Twitter技术面试失败了)
twitter面试题内容 “看下面这个图片” “在这个图片里我们有不同高度的墙.这个图片由一个整数数组所代表,数组中每个数是墙的高度.上边的图可以表示为数组[2,5,1,2,3,4,7,7,6]” “ ...
- Flashcache基本使用及注意事项
Flashcache基本使用及注意事项 发表回复 环境:Centos6.5 x64 minal 安装方法 Contents [hide] 1 安装方法 2 自动加载模块 3 创建Flashcache ...
- poj 3083 Children of th
#include <iostream> #include<stdio.h> #include<string.h> using namespace std; int ...
- Delphi获取公网IP地址函数
uses IdHTTP; function GetPublicIP: string; var strIP, URL: string; iStart, iEnd: Integer; MyIdHTTP: ...
- netcore的Session使用小记
之前说过,core需要什么功能就添加并使用什么中间件 照例,在Startup.cs的ConfigureServices方法中添加services.AddSession();再在Configure方法中 ...
- 第二节:创建模型,使用Code First,配置映射关系
这一节,实现模型的创建,配置映射关系 使用Code First数据迁移. 创建模型 一,首先创建几个接口:实体接口,聚合根接口,值对象接口 1,实体接口: 2,聚合根接口: 3,值对象接口: 二,模型 ...
- 【BZOJ2328】 [HNOI2011]赛车游戏
BZOJ2328 [HNOI2011]赛车游戏 前言 这道题目我真的佛了,卡精度+卡时间这就是下一个聊天鬼才. Solution 首先可以二分出最大速度,然后考虑下坡的话可能有更好的解,然后这样子算一 ...