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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jquery实现穿梭框功能
Jan 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
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python中的日期时间处理详解
2016/11/17 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
简单了解python数组的基本操作
2019/11/26 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
局火灾防控工作方案
2014/05/25 职场文书
关爱老人标语
2014/06/21 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
JavaScript文档对象模型DOM
2021/11/20 Javascript
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏