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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
再谈javascript原型继承
2014/11/10 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python中查看文件名和文件路径
2017/03/31 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
自我鉴定模板
2013/10/29 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
交通安全责任书范本
2014/07/24 职场文书
讲党性心得体会
2014/09/03 职场文书
2015年女生节活动总结
2015/02/27 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Nginx配置https的实现
2021/11/27 Servers
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby