deferred对象和promise对象(一)
个人认为阮一峰老师讲的关于deferred对象是最容易理解的。
deferred对象是jquery的回调函数解决方案。解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。
deferred对象的功能:
1.将ajax操作改为链式
对于$.ajax()操作完成之后,如果使用的是低于1.5版本的jquery,返回的是XHR对象,高于1.5版本返回的是deferred对象。deferred对象可进行链式操作。
$.ajax({
url:"test.html",
success:function(){},//success方法指定操作成功后的回调函数
error:function(){}//error方法指定操作失败后的回调函数
})
//新的写法
$.ajax("test.html")
.done(function(){})//done()相当于success方法
.failed(function(){})//failed()相当于error方法
2.指定同一操作的多个回调函数
deferred对象允许自由添加多个回调函数,回调函数按添加顺序执行
$.ajax("test.html")
.done(function(){})
.failed(function(){})
.dene(function(){})//直接将多个方法加在后面
3.为多个操作指定回调函数
deferred对象允许为多个事件指定一个回调函数,利用$.when()方法
//先执行两个操作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数
$.when($.ajax("test1.html"), $.ajax("test2.html"))
.done(function(){})
.fail(function(){});
4.普通操作的回调函数接口
deferred对象将回调函数的接口从ajax操作扩展到了所有操作。$.when()的参数只能是deferred对象
var wait = function(){
alertvar tasks = function(){
alert("执行完毕!");
};
setTimeout(tasks,5000);
};
为wai函数添加回调函数
var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
var tasks = function(){
alert("执行完毕!");
dtd.reject(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
存在问题:dtd是全局变量,容易被修改,解决办法:jquery的deferred.promise()方法。在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。
第一种方法:
var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
var tasks = function(){
alert("执行完毕!");
dtd.resolve(); // 改变Deferred对象的执行状态
}; setTimeout(tasks,5000);
return dtd.promise(); // 返回promise对象
}; var d = wait(dtd); // 新建一个d对象,改为对这个对象进行操作
$.when(d)
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
d.resolve(); // 此时,这个语句是无效的
第二种方法
var wait = function(dtd){
var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
var tasks = function(){
alert("执行完毕!");
dtd.resolve(); // 改变Deferred对象的执行状态
}; setTimeout(tasks,5000);
return dtd.promise(); // 返回promise对象
};
$.when(wait())
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
第三种方法:使用deferred对象的构造函数$.Deferred()
$.Deferred(wait)
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
//jQuery规定,$.Deferred()可以接受一个函数名(注意,是函数名)作为参数,$.Deferred()所生成的deferred对象将作为这个函数的默认参数。
第四种方法:在wait方法上直接部署deferred对象
var dtd = $.Deferred(); // 生成Deferred对象
var wait = function(dtd){
var tasks = function(){
alert("执行完毕!");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
};
dtd.promise(wait);
wait.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
wait(dtd);
困了,今天先到这里,明天早上继续~
deferred对象和promise对象(一)的更多相关文章
- deferred对象和promise对象(二)---deferred对象
早上醒来,继续讨论deferred对象和primise对象. deferred对象的的方法: 1.$.Deferred()-----生成一个deferred对象 2.deferred.done()-- ...
- JavaScript异步编程(1)- ECMAScript 6的Promise对象
JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...
- angularJS中的Promise对象($q)的深入理解
原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...
- ES6 Promise 对象
Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...
- 微信小程序Promise对象
Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.fin ...
- 13.Promise 对象
Promise 对象 Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其 ...
- ES6的Promise对象
http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...
- 【jQuery】Deferred(延迟)对象
本文针对jQuery-todolist项目中使用到的Deferred(延迟)对象进行具体分析 $.Deferred() 是一个构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传 ...
- ES6的新特性(15)——Promise 对象
Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了 ...
随机推荐
- win、mac 设置 php上传文件大小限制
修改php.ini win平台WAMP修改 步骤 左键点击wamp 选择php 在弹出的窗口中选择php.ini 在打开的文件中进行修改(修改步骤如下) 修改完毕,保存并重启wamp mac MAM ...
- jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr/val/text()、jq.height/width、offset()./position()./scrol Left/Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存
each 方法 $ ( selector).each(function( index,element) { } ); 参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...
- Docker 学习线路
起因 之前的几篇博客,需要一定的docker知识(虽然可以直接上手),但是对于没有docker基础的人来说是不知道为什么要这样做的. 我把之前学习docker的步骤整理出来,希望可以帮助更多的人去学习 ...
- android 端缓存清理的实现
首先关于缓存清理,网上已经有太多的工具类,但是遗憾的是,基本上都不完善,或者说根本就不能用,而项目中又要求实现这个烂东西(其实这玩意真没一点屁用,毕竟第三方清理/杀毒软件都带这么一个功能),但是只好硬 ...
- Unity3D_05_理解Unity的新GUI系统(UGUI)
理解Unity的新GUI系统(UGUI) Unity GUI 链接:UnityEngine.UI系统基础类架构图 Unity GUI 链接:UnityEngine Event & Event ...
- Winform中实现ZedGraph中曲线右键显示为中文
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- AD 域服务简介(三)- Java 对 AD 域用户的增删改查操作
博客地址:http://www.moonxy.com 关于AD 域服务器搭建及其使用,请参阅:AD 域服务简介(一) - 基于 LDAP 的 AD 域服务器搭建及其使用 Java 获取 AD 域用户, ...
- setuptools的安装
Python 2.x: sudo apt-get install python-setuptools (python2.x版本执行此命令) Python 3.x: su ...
- CentOS 7安装后的一些工作记录
安装net-tools: yum install -y net-tools 安装epel源 yum install epel-release 安装fail2ban yum install fail2b ...
- React + TypeScript 默认 Props 的处理
React 中的默认 Props 通过组件的 defaultProps 属性可为其 Props 指定默认值. 以下示例来自 React 官方文档 - Default Prop Values: clas ...