jQuery中的deferred使用方法


Posted in jQuery onMarch 27, 2017

deferred简介

deferred对象是jQuery的回调函数解决方案,jQuery之前的版本中异步回调这块做的不是很好,所以后期补上了该解决方案。

jQuery中的deferred使用方法

普遍的ajax操作方式

我们先来回顾一下jQuery中普通的ajax操作

$.ajax({
 url: 'test.html',
 success: function (res) {
 console.log('数据读取成功');
 },
 error: function () {
 console.log('数据读取失败');
 }
});

1.5版本后的新写法如下:

$.ajax('test.html').done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});

新版本的写法相比老版本有一个优势,就是可以自由添加多个回调函数并且按照添加顺序执行:

$.ajax('test.html').done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
}).done(function (res) {
 console.log('这是第二个成功的回调函数');
});

为多个ajax指定回调函数

我们可以通过when方法,为多个事件指定一个回调函数

$.when($.ajax('test.html'), $.ajax('test2.html')).done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});

为普通函数指定回调函数

前面说到的when是用于ajax方法,而ajax其实是deferred对象,如果不是ajax对象,换成普通的函数呢,直接使用when是不会有效果的,会直接执行done方法

所以我们需要手动新建一个deferred对象

var defer = $.deferred(); //新建一个deferred对象
var wait = function (defer) {
 var tasks = function () {
  console.log('执行完毕!');
  defer.resolve(); //改变deferred对象的执行状态 - 成功
 };
 setTimeout(tasks, 5000);
 return defer;
};

这里的resolve就是触发done的,对应的reject方法则是用来调用fail方法的。

var defer = $.deferred(); //新建一个deferred对象
var wait = function (defer) {
 var tasks = function () {
  console.log('执行完毕!');
  defer. reject(); //改变deferred对象的执行状态 - 失败
 };
 setTimeout(tasks, 5000);
 return defer;
};

执行方法

$.when(wait(defer)).done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});

进一步优化

上面的代码还有一些问题,defer是暴露在全局的,所以我们是可以通过在全局进行defer.resolve()来提前回调。

为了避免这种情况,jQuery提供了deferred.promise()方法,它的作用是在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done方法和fail方法)屏蔽与改变执行状态有关的方法(比如resolve和reject方法)。

var defer = $.deferred(); //新建一个deferred对象
var wait = function (defer) {
 var tasks = function () {
  console.log('执行完毕!');
  defer.resolve(); //改变deferred对象的执行状态 - 成功
 };
 setTimeout(tasks, 5000);
 return defer.promise();
};
$.when(wait(defer)).done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});

也可以把defer包在函数中

// 普通方法
var wait = function () {
 var defer = $.deferred(); //新建一个deferred对象
 var tasks = function () {
  console.log('执行完毕!');
  defer.resolve(); //改变deferred对象的执行状态 - 成功
 };
 setTimeout(tasks, 5000);
 return defer.promise();
};
$.when(wait()).done(function (res) {
 console.log('数据读取成功');
}).fail(function () {
 console.log('数据读取失败');
});
// 执行异步
var setAjax = function () {
 var defer = $.Deferred();
 if (xhr) {
  xhr.abort();
  xhr = null;
 }
 var xhr = $.ajax({
  url: 'test.html',
  success: function (res) {
   console.log('数据读取成功');
   defer.resolve(res);
  },
  error: function () {
   console.log('数据读取失败');
   defer.reject();
  }
 });
 return defer.promise();
}
$.when(setAjax()).then(function (res) {
 console.log('数据读取成功', res);
}, function () {
 console.log('数据读取失败');
});

以上所述是小编给大家介绍的jQuery中的derferred使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 #jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 #jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 #jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 #jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 #jQuery
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
js控制框架刷新
2008/08/01 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
javascript时间函数大全
2014/06/30 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python根据url地址下载小文件的实例
2018/12/18 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
python求解汉诺塔游戏
2020/07/09 Python
Python如何在bool函数中取值
2020/09/21 Python
Nike香港官网:Nike HK
2019/03/23 全球购物
《囚绿记》教学反思
2014/03/01 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
风之谷观后感
2015/06/11 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
MySQL存储过程及语法详解
2022/08/05 MySQL