jQuery同步Ajax带来的UI线程阻塞问题

原创 dandelion_chen 随笔 ajax 153阅读 2018-01-26 16:02:26 举报

最近在遇到一种情况是:使用ajax请求数据后,并将数据赋值给一个变量。获取变量在渲染页面。
var resList,resFun ,renderFun
javascript 代码

逻辑大概就是这样子的,可是实际操作出现在请求resFun中ajax请求没结束前,loading没出来,打算点的时候确实是有过 代码2那个地方的。

出现原因

这让我很郁闷,在网上搜索下,才发现这是jQuery同步Ajax带来的UI线程阻塞。浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面的其他进程会被暂时停下来,到时页面得不到渲染。(如果ajax异步是不会出现的。)

解决办法

1、使用setTimeout
在请求的数据代码加上setTimeout,大致代码如下
javascript 代码

延时设置为0即可。虽然setTimeout可以解决这件问题,但还是不是推荐的。在有些浏览器中是有问题的,我在360浏览器中会出现gif图不动。

2、使用jquery中的Deferred
大致是将代码1的代码改为
javascript 代码

代码3、4修改为以下方式就能实现了。
javascript 代码

备注:如果你是用zepto的话 ,想要使用Deferred的话,需要单独引入Deferred和callback文件,链接在github此处。https://github.com/madrobby/zepto/tree/master/src

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复