位置: 编程技术 - 正文
Jquery promise实现一张一张加载图片(jquery prototype)
编辑：rootadmin推荐整理分享Jquery promise实现一张一张加载图片(jquery prototype)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery中的prop,jquery prompt,jquery prop,jqueryprev,jquery prompt,jquery prompt,jquery prop,jquery propertychange,内容如对您有帮助，希望把文章链接给更多的朋友！
Promise是CommonJS的规范之一，拥有resolve、reject、done、fail、then等方法，能够帮助我们控制代码的流程，避免函数的多层嵌套。如今异步在web开发中越来越重要，对于开发人员来说，这种非线性执行的编程会让开发者觉得难以掌控，而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象，年底即将发布的ES6也将原生实现Promise。
在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能。
现在就更进一步，完成一个能够一张一张的连续图片加载的功能。
功能：
1.一张一张加载图片。
2.加载错误，超时后显示加载失败图片。
对于功能的要求，肯定会存在对加载状态事件的处理以及完成时回调函数的处理，这样不仅会造成代码上的混乱，甚至破坏各种原则，就不再用普通的方法去写了。针对这种状态通知的特点，比较合适采用promise架构进行处理，promise本质上就是订阅发布设计模式的一种，当前这个功能就用jquery自带的promise进行开发。
1.完成一个加载图片的代理创建函数，可以生成一个带有加载超时、失败、成功、取消监控能力的代理。
其中，通过以下的方式创建了一个Deferred对象
Deferred对象通过resolve方法触发完成事件，使用done方法响应完成事件。
加载成功时的完成事件。
以及加载完成时的响应处理，就是把图片设到元素上，下面的代码是上面链式写法的拆解。
Defferred对象通过reject方法触发拒绝事件，使用fail方法响应拒绝事件，表示加载失败。
在加载超时，终止，异常时的拒绝事件。
以及加载失败时的响应处理，设置失败图片。
在代理函数的最后，返回deferred的promise对象，用于给调用的地方监控加载的完成和失败态，以便于下一张图片的加载。
return dfd.promise();
2.一张一张的连续加载
做一个loadOneByOne的加载递归函数。
内部先创建一个加载代理，在代理加载完图片，不管是成功还是失败后，递归调用loadOneByOne函数加载下一张图片。
关键就在于代理函数返回的promise对象，使用.always方法可在加载完成后（成功或失败）进行loadOneByOne递归调用加载下一张。
至此完成。
采用了promise模式后，callback函数不见了，维护状态的函数和内部变量也不见了，代码更清晰简单，使得代理函数和本地函数之间的一致性得到保护。
完整代码：
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题 Promises是一种令代码异步行为更加优雅的抽象，它很有可能是JavaScript的下一个编程范式，一个Promise即表示任务结果，无论该任务是否完成。在一些现代
jquery动画效果学习笔记（8种效果） 1、元素的显示和隐藏display:none;隐藏display:block;显示简单显示和隐藏方法a)show()显示b)hide()隐藏c)toggle()开关，显示则隐藏，隐藏则显示scripttype="text/javascrip
jquery实现九宫格大转盘抽奖 下面我们来分享一个九宫格抽奖特效特效说明：一款jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖
标签: jquery prototype
本文链接地址:https://www.jiuchutong.com/biancheng/370503.html 转载请保留说明！下一篇：以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题(jquery的deferred)
![[Unity-21] Prefab详解(unity旋转角度范围限制)](https://www.jiuchutong.com/image/20240129/1706507202.jpg)