文档章节

js的异步调用

gznovice
 gznovice
发布于 2015/12/02 14:42
字数 569
阅读 55
收藏 0

我在测试用google的CryptoJS库来计算文件的md5和sha1。


最简单的异步调用

var fr = new FileReader;
fr.onload=function(event){
var _bytelength = fr.result.byteLength;
var binary =  CryptoJS.lib.WordArray.create(fr.result);
var md5 = CryptoJS.MD5(binary).toString();
var sha1 = CryptoJS.SHA1(binary);
var base64 = sha1.toString(CryptoJS.enc.Base64);;
    console.log(md5);
document.getElementById("message").innerHTML = "file " + currentFile.name + " is read" + "<p>" + "md5 is " + md5 
+ "<p>" + "sha1 is " + base64;
}
fr.readAsArrayBuffer(_file);

这样是没有问题的。


但是当我计算上百兆的文件的时候,一次性的load文件,浏览器就会崩掉,下面是改进代码,区别是slice文件后,读取每一个blob,计算每一个blog的md5,sha1,当读完所有blob后,就计算出结果来。

function readFile(_file)
{
currentFile =  _file;
var startByte, endByte;
startByte = endByte = 0; 
var fileSize = _file.size;
var md5_cal = CryptoJS.algo.MD5.create();
var sha1_cal = CryptoJS.algo.SHA1.create();
var blob;
var cnt = 0;//rememeber the count of calling of readBlob 
var readBlob = function(_blob)
{
var fr = new FileReader;
fr.onload=function(event){
var binary =  CryptoJS.lib.WordArray.create(fr.result);
md5_cal.update(binary);
sha1_cal.update(binary);
cnt = cnt - 1;
};
/*fr.onloadend=function(event){
if(this.readyState == FileReader.DONE) {  
var binary =  CryptoJS.lib.WordArray.create(fr.result);
md5_cal.update(binary);
sha1_cal.update(binary);
}
};*/
fr.readAsArrayBuffer(_blob);
};
while(endByte != fileSize)
{
endByte = Math.min(startByte + 102400, fileSize);
blob = _file.slice(startByte, endByte);
readBlob(blob);
startByte = endByte;
cnt = cnt + 1;
}
function printResultIfReady()
{
if(cnt == 0)
{
var md5 = md5_cal.finalize().toString();
var sha1 = sha1_cal.finalize();
var base64 = sha1.toString(CryptoJS.enc.Base64);
document.getElementById("message").innerHTML = "file " + currentFile.name + " is read" + "<p>" + "md5 is " + md5 
+ "<p>" + "sha1 is " + base64;
}
else{
setTimeout(printResultIfReady, 500);
}
}
setTimeout(printResultIfReady,500);
}


但由于异步调用的先后完成的顺序不一样,导致各个浏览器的计算结果不同,chrome的正确,ie和firefox错误,但各自不同。

于是我改进下,就是当前一个blob读取调用完成后,才进行下一个blob的读取,这样就没有问题了。

function readFile(_file)
{
currentFile =  _file;

var startByte, endByte;
startByte = endByte = 0; 
var fileSize = _file.size;
var md5_cal = CryptoJS.algo.MD5.create();
var sha1_cal = CryptoJS.algo.SHA1.create();
var blob;
var cnt = 0;//rememeber the count of calling of readBlob 
var _readFile = function()
{
endByte = Math.min(startByte + 102400, fileSize);
blob = _file.slice(startByte, endByte);
readBlob(blob);
startByte = endByte;
cnt = cnt + 1;
}
var readBlob = function(_blob)
{
var fr = new FileReader;
fr.onload=function(event){
var binary =  CryptoJS.lib.WordArray.create(fr.result);
md5_cal.update(binary);
sha1_cal.update(binary);
cnt = cnt - 1;
if(endByte != fileSize)
{
_readFile();
}
else{
printResultIfReady();
}
};

fr.readAsArrayBuffer(_blob);
};

function printResultIfReady()
{
var md5 = md5_cal.finalize().toString();
var sha1 = sha1_cal.finalize();
var base64 = sha1.toString(CryptoJS.enc.Base64);
document.getElementById("message").innerHTML = "file " + currentFile.name + " is read" + "<p>" + "md5 is " + md5 
+ "<p>" + "sha1 is " + base64;
}
if(endByte != fileSize)
{
_readFile();
}
}




代码很丑陋,不过可以说明问题就好。

© 著作权归作者所有

共有 人打赏支持
上一篇: 0xc000007b
下一篇: 测试javascript继承
gznovice
粉丝 11
博文 17
码字总数 3853
作品 0
广州
私信 提问
11、手把手教 Vue--彻底搞懂 JS 异步编程

PS:转载请注明出处 作者: TigerChain 地址: https://www.jianshu.com/p/876e68fd6a1c 本文出自 TigerChain 简书 手把手教 Vue 系列 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略...

TigerChain
10/18
0
0
【iOS & Web】JavaScript & Objective-C二重奏

一、JS call OC 方法1: 通拦截协议头来获取协议字符串。在UIWebView中的代理方法中有这样的方法,如下图所示: 下面是我写的简单的H5页面通过JS请求一个自定义协议的URL,然后通过UIWebView...

魔笛GNR
2016/10/19
0
0
探索Javascript异步编程

笔者在之前的一片博客中简单的讨论了Python和Javascript的异同,其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题。 JavaScript 异步编程简介 回调函数和异步执行 所谓...

naughty
2014/05/22
0
8
[翻译]理解异步JavaScript

写在文章前 这篇文章是翻译自Sukhjinder Arora的 Understanding Asynchronous JavaScript。这篇文章描述了异步和同步JavaScript是如何在运行环境中,使用调用栈,消息队列,作业队列,以及事...

YukiSong
12/10
0
0
React Native之js同步调用安卓原生方法@ReactMethod(isBlockingSynchronousMethod = true)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011068702/article/details/82793854 1 问题 之前的代码js调用安卓原生都是用的异步方法,比如callback, pro...

chenyu_insist
09/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
49分钟前
1
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
52分钟前
1
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
1
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
1
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部