jQuery中借助deferred来请求及判断AJAX加载的实例讲解


Posted in Javascript onMay 24, 2016

ajax请求异步队列加载
我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况。ajax默认使用异步加载(async:true)。为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞的问题。通常表现为在加载大量数据时由于加载时间过长导致页面不能点击、gif动画卡死以及浏览器崩溃等问题。所以,一般情况下,尽量使用ajax异步加载。
可是,我们有些时候的需求要求ajax同步加载,一个加载完再加载下一个,即所谓的队列。前面我们有说过,同步加载会引起UI渲染阻塞问题。那么我们要怎么实现顺序加载而不引起该问题呢?
示例代码一:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
 $("#clickBtn").on("click",function(){
  getData(0,10);//输出0-9
 })
})

function getData(i,length){
 $.ajax({
  type:"post",
  url:"setDeffer.php",
  data:{
   data:i
  },
  async:true,//异步
  success:function(data){
   $("#showArea").text($("#showArea").text()+data+"\n");
   if(i<length-1){
    getData(i+1,length);
   }
  }
 });
}
</script>

PHP后台代码:

<?php
$str = $_POST["data"];
sleep(1);//延迟1秒
echo "输出".$str;
?>

当然,jquery也提供了我们deferred对象来解决回调函数的问题。
示例代码二:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
 $("#clickBtn").on("click",function(){
  recycleData(0,10);//输出0-9
 })
})

function getData(i){
 var defer = $.Deferred();
 $.ajax({
  type:"post",
  url:"setDeffer.php",
  data:{
   data:i
  },
  async:true,//异步
  success:function(data){
   $("#showArea").text($("#showArea").text()+data+"\n");
   defer.resolve(data);
  }
 });
 return defer.promise();
}
function recycleData(i,length){
 $.when(getData(i)).done(function(data){//这里的data为defer在ajax保存下来的数据
  if(i<length-1){
   recycleData(i+1,length);//递归
  }
 })
}
</script>

这里首先创建一个deffered对象,在ajax的success函数中将ajax返回的数据保存在deffered对象中,然后返回deffered对象。这样就保证了在下一次ajax请求的时候这个ajax已经请求完成。deferred对象的好处包括它允许你给一个事件自由添加多个回调函数。或者给多个事件统一指定回调函数。

用jquery的deferred对象实现判断页面中所有图片加载完成
如果我们加载的是图片,对于图片是否加载完成,我们平时可以用监听图片load 方法来进行。今天主要介绍用jquery的deferred对象来进行判断。
关于jquery的deferred对象,是jquery的重点和难点。对于执行较长时间的函数,我们通常用deferred对象。
关于deferred对象,我在这里稍微介绍一下$.when().then()

function successFunc(){ console.log( “success!” ); } 
function failureFunc(){ console.log( “failure!” ); } 

$.when( 
$.ajax( "/main.php" ), 
$.ajax( "/modules.php" ), 
$.ajax( “/lists.php” ) 
).then( successFunc, failureFunc );

可以同时调用多个ajax,然后通过then来返回成功或者失败。

或者

$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });

我们回到正题来,用jquery的deferred对象实现判断页面中所有图片加载完成

var defereds = []; //定义一个数组存放Deferred对象

$imgs.each(function() { //imgs循环所有图片
  var dfd = $.Deferred();// 新建一个deferred对象

  $(this).load(dfd.resolve());// 图片加载完成之后,改变deferred对象的执行状态
  defereds.push(dfd);//push到数组中
});
$.when.apply(null, defereds).done(function() {
  console.log('load compeleted');
});

因为 $.when 支持的参数是 $.when(dfd1, dfd2, dfd3, ...),所以我们这里使用了 apply 来接受数组参数。

上面提到了apply(),又引申到了 在JS中,call()方法和apply()方法

我在这里稍微介绍一下apply()

假如我们有prints函数:

function prints(a,b,c,d){
    console.log(a+b+c+d);
  }
  function example(a,b,c,d){
    prints.apply(this,[a,b,c,d]);
  }
  example("1","sd","wq","wqe") //输出:1sdwqwqe

或者我们可以这么写:

prints.apply(null,["脚","本","之","家"]);//输出:三水点靠木
Javascript 相关文章推荐
js关闭父窗口时关闭子窗口
Apr 01 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
学习vue.js计算属性
Dec 03 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 #Javascript
原生js的数组除重复简单实例
May 24 #Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 #Javascript
json传值以及ajax接收详解
May 24 #Javascript
JS获取屏幕高度的简单实现代码
May 24 #Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 #Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 #Javascript
You might like
长波知识介绍
2021/03/01 无线电
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python+mysql实现教务管理系统
2019/02/20 Python
详解Python的循环结构知识点
2019/05/20 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
一份Java笔试题
2012/02/21 面试题
社区网格化管理实施方案
2014/03/21 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
感谢信模板大全
2015/01/23 职场文书
公司人事任命通知
2015/04/20 职场文书
就业证明函
2015/06/17 职场文书
导游词之南京栖霞山
2019/10/18 职场文书