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 instanceof 与typeof使用说明
Jan 11 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
javascript实现用户必须勾选协议实例讲解
Mar 24 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
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
解析js如何获取css样式
2016/12/11 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
javascript实现简易计算器
2017/02/01 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
vue 中的keep-alive实例代码
2018/07/20 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python self,cls,decorator的理解
2009/07/13 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
kali中python版本的切换方法
2019/07/11 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
python实现静态服务器
2019/09/05 Python
Python文件操作基础流程解析
2020/03/19 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
numba提升python运行速度的实例方法
2021/01/25 Python
酒店人事主管岗位职责
2015/04/11 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
2019个人半年工作总结
2019/06/21 职场文书
《三国志》赏析
2019/08/27 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers