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表格分页实现代码
Sep 18 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 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
建立动态的WML站点(一)
2006/10/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Python continue语句用法实例
2014/03/11 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
护士演讲稿范文
2014/01/05 职场文书
超市开店计划书
2014/04/26 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
教师节横幅标语
2014/10/08 职场文书
实习护士自荐信
2015/03/25 职场文书
网络研修随笔感言
2015/11/18 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
Python入门之基础语法详解
2021/05/11 Python