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请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery列表动态增加和删除的实现方法
Nov 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版(3)
2006/10/09 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
php提取微信账单的有效信息
2018/10/01 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python的多重继承的理解
2017/08/06 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
大学校运会广播稿
2014/02/03 职场文书
平安建设实施方案
2014/03/19 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
小学生读书活动总结
2014/06/30 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
初一语文教学反思
2016/03/03 职场文书