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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现简单飞机大战
Jul 05 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取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
js onload处理html页面加载之后的事件
2013/10/30 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
使用python实现生成用户信息
2017/03/20 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
快速了解Python中的装饰器
2018/01/11 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python用Configobj模块读取配置文件
2020/09/26 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
讲座主持词
2014/03/20 职场文书
广播节目策划方案
2014/05/23 职场文书
国际贸易专业求职信
2014/06/04 职场文书
企业文化宣传标语
2014/06/09 职场文书
支部组织生活会方案
2014/06/10 职场文书
应届大学生自荐书
2014/06/17 职场文书
公司车队管理制度
2015/08/04 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
公历12个月名称的由来
2022/04/12 杂记
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python