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模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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 $_FILES中error返回值详解
2014/01/30 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
详解vue 项目白屏解决方案
2018/10/31 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
python实现连接mongodb的方法
2015/05/08 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
python实现可逆简单的加密算法
2019/03/22 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python for i in range ()用法详解
2020/09/18 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
美德少年事迹材料
2014/01/23 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
党小组评议意见
2015/06/02 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL