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为某个div加入行样式
Jun 09 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jquery插件实现轮播图效果
Oct 19 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
php array_slice函数的使用以及参数详解
2008/08/30 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python查看列的唯一值方法
2018/07/17 Python
python如何将两个txt文件内容合并
2019/10/18 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python