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 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
JavaScript编写开发动态时钟
Jul 29 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
JavaScript控制Session操作方法
2013/01/17 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
python删除文件示例分享
2014/01/28 Python
5款非常棒的Python工具
2018/01/05 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
结构和类有什么异同
2012/07/16 面试题
小学美术教学反思
2014/02/01 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
税务会计岗位职责
2014/02/18 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
车辆年审委托书范本
2014/09/18 职场文书
九九重阳节标语
2014/10/07 职场文书
先进工作者申报材料
2014/12/23 职场文书
史上最牛的辞职信
2015/02/28 职场文书
跳高加油稿
2015/07/21 职场文书
心理健康教育主题班会
2015/08/13 职场文书