jquery-deferred应用

我们说jquery1.5之后用的用deferred,那么deferred到底是个什么东西,看个例子
var wait = function(){var task = function(){console.log('执行完成');}setTimeout(task, 2000);
}
wait();

现在在task里面的执行完成之后进行某些特别复杂的操作,代码可能会很多。那么要这么怎么办。如果继续在下面写也没有问题,但是不符合开放封闭的原则。后面很有可能多次再改这一大堆的代码。对修改开放,对拓展关闭。我们需要实现对修改关闭,对拓展开放。

 

为了解决这个问题,我们引入jquery的deferred
function waitHandle(){var dtd = $.Deferred(); // 创建一个deferred对象var wait = function(dtd){ // 要求传入一个 deferred对象var task = function(){console.log('执行完成');dtd.resolve(); // 表示异步任务已经完成// dtd.reject(); // 表示异步任务失败或出错}setTimeout(task, 2000);return dtd; // 要求返回deferred对席那个}// 注意,这里一定要有返回值return wait(dtd);
}

这里面有三层函数,第一层函数是waitHandle,第二层是wait函数,第三层是task函数。这里有两个return,第一个传进did。然后进行一系列加工,返回了dtd。然后最终怎么用

 

var w = waitHandle();
w.then(function(){console.log('success1');
},function(){console.log('error');
})
.then(function(){console.log('success2')
},function(){console.log('error2')
});
// 还有w.done 和 w.fail

 

总结,dtd的api可分成两类,用意不同

第一类:dtd.resolve dtd.reject
第二类:dtd.then dtd.done dtd.fail
这两类应该分开,否则后果很严重!
比如在上面代码最后执行dtd.reject()。试一下后果。。
function waitHandle(){var dtd = $.Deferred(); // 创建一个deferred对象var wait = function(dtd){ // 要求传入一个 deferred对象var task = function(){console.log('执行完成');dtd.resolve(); // 表示异步任务已经完成// dtd.reject(); // 表示异步任务失败或出错}setTimeout(task, 2000);return dtd; // 要求返回deferred对席那个}// 注意,这里一定要有返回值return wait(dtd);
}var w = waitHandle();
w.reject() // 非常不老实的做法
w.then(function(){console.log('success1');
},function(){console.log('error');
}).then(function(){console.log('success2')
},function(){console.log('error2')
});

 

那么怎么解决这个问题呢,也就引出了最最重要的角色,非常类似于promise;
function waitHandle(){var dtd = $.Deferred(); // 创建一个deferred对象var wait = function(dtd){ // 要求传入一个 deferred对象var task = function(){console.log('执行完成');dtd.resolve(); // 表示异步任务已经完成// dtd.reject(); // 表示异步任务失败或出错}setTimeout(task, 2000);return dtd.promise(); // 这里返回promise,而不是直接返回deferred}// 注意,这里一定要有返回值return wait(dtd);
}var w = waitHandle();
w.then(function(){console.log('success1');
},function(){console.log('error');
}).then(function(){console.log('success2')
},function(){console.log('error2')
});
虽然这里promise()方法的调用,但已经把promise最初的概念提出来了,这还是jquery1.5的时候。返回promise以后,这个时候去b同学去改w.reject()会报错。返回promise后,只能用监听的方法then,done,fail,不能去改resolve,reject。监听是其他同学唯一的权利。

转载于:https://www.cnblogs.com/wzndkj/p/10987549.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362424.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动装箱,拆箱和NoSuchMethodError

J2SE 5为Java编程语言引入了许多功能。 这些功能之一是自动装箱和拆箱 ,这是我几乎每天都没有考虑过的功能。 它通常很方便(尤其是与收藏夹一起使用时),但有时会导致一些令人讨厌的惊喜 ,即“ 怪异 ”和“ 疯狂” 。 在…

vue 不能监测数组长度变化length的原因

由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] newValue 当你修改数组的长度时,例如: vm.items.length newLength因为vue的响应式是通…

vue 动态显示三级路由

无需 vuex、本地存储实现动态显示三级路由。 目录 一、需求描述: 二、代码 2.1 路由配置 1. 我的一级菜单和二级菜单的路由配置的: 2. 三级菜单的路由配置: 3. 上面有几个变量和要注意的细节: 2.2 封装导航栏 2.3 封装面…

第二章 Vue快速入门-- 18 v-for中key的使用注意事项

注意:如果属性和方法还没定义直接使用的话&#xff0c;就会报 xxx is not defined 导致界面不能正常显示。我看视频教程里老师的可以直接使用&#xff0c;而且界面正常显示&#xff0c;可能是vue版本不同吗&#xff1f;还不清楚 1 <!DOCTYPE html>2 <html lang"…

口碑网发布2010吃住玩消费风向指数

当在淘宝网上买衣服、买电器、买……都变得司空见惯&#xff0c;下一步我们会在网上完成什么消费&#xff1f; 通过网购等电子商务模式的带动&#xff0c;电子商务平台对于老百姓日常消费、生活的影响逐渐深化。原本更多依靠传统手段完成的吃住玩等生活消费&#xff0c;现在也…

Java并发教程–线程安全设计

在回顾了处理并发程序时的主要风险&#xff08;如原子性或可见性 &#xff09;之后&#xff0c;我们将进行一些类设计&#xff0c;以帮助我们防止上述错误。 其中一些设计导致了线程安全对象的构造&#xff0c;从而使我们可以在线程之间安全地共享它们。 作为示例&#xff0c;我…

ES6 iterator 迭代器

iterator使用TypeScript 的描述&#xff1a; interface Iterable {[Symbol.iterator]() : Iterator,}interface Iterator {next(value?: any) : IterationResult,}interface IterationResult {value: any,done: boolean,} 一个数据结构只要具有 Symbol.iterator属性&#xff0…

vue 后端返回二进制流文件,前端如何实现下载?

目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流&#xff1a; 1.2 使用&#xff1a; 1.3 需要注意以下几点&#xff1a; 2. 关于 arraybuffer 和 blob 2.1 ArrayBuffer 和 blob 2.2 区别 2.3 相互转换 3. 主要参考&#xff1a; 1. axios 请求二进制…

python量化之路:获取历史某一时刻沪深上市公司股票代码及上市时间

python量化之路&#xff1a;获取历史某一时刻沪深上市公司股票代码及上市时间 最近开始玩股票量化&#xff0c;由于想要做完整的股票回测&#xff0c;因此股票的上市和退市信息就必不可少。因为我们回测的时候必须要知道某一日期沪深股票的成分包含哪些对吧。所以我们要把沪深全…

《网页设计创意书》读后感

刚刚收到《网页设计创意书》&#xff0c;确实有点惊喜&#xff0c;开始以为是像之前审读的书一样是一叠叠的打印纸&#xff0c;没想到是一本成品书&#xff0c;拿到手上沉甸甸的&#xff0c;随便翻看了一下&#xff0c;没想到里面竟然还是全彩页印刷的&#xff0c;本书的第一感…

游戏AI –行为树简介

游戏AI是一个非常广泛的主题&#xff0c;尽管有很多资料&#xff0c;但我找不到能以较慢&#xff0c;更容易理解的速度缓慢介绍这些概念的东西。 本文将尝试解释如何基于行为树的概念来设计一个非常简单但可扩展的AI系统。 什么是AI&#xff1f; 人工智能是参与游戏的实体表现…

js 常用类型转换简写

1、字符串转数字 666// 666 2、转换为字符串 666//666 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

mockJs文档(二)

mockJs官方文档 mockJs文档&#xff08;一&#xff09; 目录 1. Mock.mock( rurl?, rtype?, template|function( options ) ) 1.1 Mock.mock( template ) 1.2 Mock.mock( rurl, template ) 1.3 Mock.mock( rurl, function( options ) ) 1.4 Mock.mock( rurl, r…

winforms中限定上传文件类型

获取文件路径string fileExtension System.IO.Path.GetExtension(filePath).ToLower();bool flag true;string[] AllowExtension { ".doc", ".xls", ".ppt", ".docx", ".xlsx", ".pptx", ".txt", &q…

liteos错误处理(十一)

1. 概述 1.1 基本概念 错误处理指用户代码发生错误时&#xff0c;系统调用错误处理模块的接口函数&#xff0c;完成上报错误信息&#xff0c;并调用用户自己的钩子函数&#xff0c;进行特定的处理。 错误处理模块实现OS内部错误码记录功能。OS内部错误码无法通过接口返回&#…

这是东西:jUnit:动态测试生成

当您需要在许多不同的输入值或配置上运行同一组测试时&#xff0c;动态测试生成很有用。 可以使用参数化测试或使用理论来实现。 当您有大量数据用作参数并想对所有组合进行测试时&#xff0c;这些理论非常有用。 您得到的控制较少&#xff0c;但是您不必自己编写合并和迭代的…

js 变量提升与函数提升

规则&#xff1a; 函数的提升优先于变量提升。同名的函数会覆盖同名的函数与变量。同名的变量不会覆盖同名的函数。 示例代码1&#xff1a; <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"vi…

mockJs文档(一)

Mock.js 官网 目录 1. 开始安装 1.1 Node&#xff08;CommonJS&#xff09; 1.2 CMD方式 2. 语法规范 2.1 数据模板定义规范 DTD 2.1.1. 属性值是字符串 String 2.1.2. 属性值是数字 Number 2.1.3. 属性值是布尔型 Boolean 2.1.4. 属性值是对象 Object 2.1.5. 属性值…

【JOURNAL】《不思八九》 --和友腊八诗一首

不思八九旧岁新醅雪&#xff0c;腊八数九粥。红泥杜康曲&#xff0c;暖腹亦无忧。&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;&#xff0d;http://t.sina.com.cn/n/博客顺风 腊八 辞岁逢新雪&#xff0c;好煮腊八粥。且将情入味&#xff0c;一并…

团队测试计划

我们是否需要测试&#xff0c;直到我们的软件是完美的&#xff1f; 首先针对第一个问题&#xff0c;我们一直觉得有必要&#xff0c;因为老师说过&#xff0c;只有多次测试才能真正检测出自己的代码是否完全没问题&#xff0c;所以我们进行了多次测试&#xff0c;虽然我对自己的…