js promise
来源:互联网 发布:青海网络广播电视台 编辑:程序博客网 时间:2024/06/06 21:42
前提
用webview 做app开发。中间遇到图片上传的问题,上传过程展示上传进度。
原来的思路是for 循环,创建异步上传。但是在做的过程中发现,会出现上传展示会出现 1/20 一下子就到了 7/20 然后 15/20 最后完成的现象。我觉得可能是 浏览器会一次性执行好几个请求,导致速度不均衡。所以我希望可以让一个请求完成,在进行另一个请求。
虽然有普通的方法可以实现这个过程。但是还是学到了一个新的方法来做这样的操作就是 承诺 promise
阮大神的解释
Promises对象
Promises对象是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。
简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:
f1().then(f2);
f1要进行如下改写(这里使用的是jQuery的实现):
function f1(){ var dfd = $.Deferred(); setTimeout(function () { // f1的任务代码 dfd.resolve(); }, 500); return dfd.promise; }
这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。
比如,指定多个回调函数:
f1().then(f2).then(f3);
再比如,指定发生错误时的回调函数:
f1().then(f2).fail(f3);
而且,它还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号
。这种方法的缺点就是编写和理解,都相对比较难。
代码 一张一张上传图片,一张加载完成,另一张开始加载。
function RenderSelectPhoto() { renderDomImg().then(function() { P.fileIndexImg++; RenderSelectPhoto(); })}function renderDomImg() { return new Promise(function(resolve, reject) { var FilesLeng=getPropertyCount(P.Files); var file=P.Files[P.fileIndexImg]; var image = document.createElement("img"); image.file = file; var reader = new FileReader(); var ret = reader.readAsDataURL(file); reader.onload = (function(aImg){ return function(e){ var img = new Image(); img.src = e.target.result; var canvas = document.createElement("canvas"); canvas.width="300"; canvas.height="300"; ctx = canvas.getContext("2d"); img.onload= function(){ ctx.fillRect(0,0,300,300); ctx.drawImage(img,0,0,300,300); var _canvas = canvas.toDataURL("image/jpeg", 0.5); $("#index" + photoclass).attr("src",_canvas); setTimeout(function(){ resolve();//这里 开始下一次循环 },200) } }; }(image)); })}
阅读全文
1 0
- JS Promise
- js promise
- promise.js
- js-Promise A+规范
- promise - common js
- js Promise学习
- Node,js 中的Promise
- react.js-12-promise
- Promise.js with AJAX
- JS Promise用法
- JS(六)promise
- JS中的Promise 使用
- 对js Promise理解
- js promise实现笔记
- JS异步操作-promise
- js的promise应用
- 原生JS实现Promise
- JS中的promise对象
- 手动编译、执行java文件
- HDU
- WPF中的Template模板
- Spring Boot 集成Swagger
- Hive优化---map端连接
- js promise
- NKOJ-2460 清理花瓶
- JS中令人纠结的this
- 解决Retrofit文件下载进度显示问题
- Chrome远程调试之WebSocket
- Unity入门操作_ 角色控制器_015
- # Consumed parameters
- HDMI基本知识
- Linux安装MySQL