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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
js数组去重的方法总结
Jan 18 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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 array_multisort() 函数的深入解析
2013/06/20 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
简单谈谈json跨域
2016/03/13 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python判断两个对象相等的原理
2017/12/12 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python使用进程Process模块管理资源
2020/03/05 Python
详细分析Python collections工具库
2020/07/16 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
2014学年自我鉴定
2014/02/23 职场文书
护士毕业实习感言
2014/03/05 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
三下乡活动心得体会
2016/01/23 职场文书
银行求职信怎么写
2019/06/20 职场文书
少儿励志名言(80句)
2019/08/14 职场文书