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整除实现代码
Nov 23 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
vue的diff算法知识点总结
2018/03/29 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
python单例模式实例分析
2015/04/08 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python读取word文本操作详解
2018/01/22 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
文明村镇申报材料
2014/05/06 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
志愿者活动总结报告
2014/06/27 职场文书
授权委托书协议书
2014/10/16 职场文书
三八节活动主持词
2015/07/04 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
分享python函数常见关键字
2022/04/26 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript