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表单验证代码
Aug 02 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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
调频问题解答
2021/03/01 无线电
mysql limit查询优化分析
2008/11/12 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
python 链接和操作 memcache方法
2017/03/04 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python中使用while循环的实例
2019/08/05 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
毕业生机械建模求职信
2013/10/14 职场文书
消费者投诉书范文
2015/07/02 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫