场景:使用工具函数downloadAllAsync接收一个URL数组并下载所有文件,结果返回一个存储了文件内容的数组,每个URL对应一个字符串。

好处:downloadAllAsync并不只有清理嵌套回调函数的好处,其主要好处是并行下载文件。我们可以在同一个事件循环中一次启动所有文件的下载,而不用等待每个文件完成下载。

并行逻辑是微妙的,很容易出错。下面的实现有一个隐蔽的缺陷。

function downloadAllAsync(urls, onsuccess, onerror) {
var result = [],
len = urls.length; if(len === 0) { // 如果请求路径为空, 不执行下面的程序
// 绝不要同步地调用异步的回调函数
setTimeout(onsuccess.bind(null, result), 0);
return;
} urls.forEach(function(url) {
downloadAsync(url, function(r) {
if(result) {
result.push(r); // race condition
// 根据提供的url, 所有文件数据被成功下载后,执行onsuccess程序
result.length === len && onsuccess(result);
}
}, function(e) {
if (result) {
result = null; // 在错误的情况下, 确保onerror只执行一次
onerror(e);
}
})
})
}

如果有多个下载失败,我们设置了result数组为null,从而保证onerror只被调用一次。即在第一次错误发生时。

downloadAllAsync函数实现的是一旦下载完成就立即将中间结果保存在result数组的末尾。因此,陷阱是保存下载文件内容的数组的顺序是未知的。几乎不能正确使用这样的API,因为调用者无法找出哪个结果对应哪个文件。

疑问:为什么使用setTimeout函数来调用onsuccess回调函数,而不是直接调用它

我们将请求的中间结果存储在原始的索引位置来达到预期结果

function downloadAllAsync(urls, onsuccess, onerror) {
var result = [],
len = urls.length; if(len === 0) {
setTimeout(onsuccess.bind(null, result), 0);
return;
} urls.forEach(function(url, index) {
downloadAsync(url, function(r) {
if(result) {
result[index] = r; // store at fixed index result.length === len && onsuccess(result); // race condition
}
}, function(e) {
if (result) {
result = null;
onerror(e);
}
})
})
}

该实现利用了foreach回到函数的第二个参数。该参数为当前迭代提供的数组索引。不幸的是,这仍然不正确。

数组更新契约,即设置一个索引属性,总是确保数组的length属性大于索引。

正确的实现应用了一个计数器来追踪正在进行的操作数量。

function downloadAllAsync(urls, onsuccess, onerror) {
var result = [],
pending = urls.length; if(pending === 0) {
setTimeout(onsuccess.bind(null, result), 0);
return;
} urls.forEach(function(url, index) {
downloadAsync(url, function(r) {
if(result) {
result[index] = r; // store at fixed index
// pending -= 1; // register the success
// pending === 0 && onsuccess(result); // race condition --padding || onsuccess(result);
}
}, function(e) {
if (result) {
result = null;
onerror(e);
}
})
})
}

现在整个世界都太平了,不论事情以什么样的顺序发生,pending计数器都能准确地指出何时所有的事件会被完成,并以预期的顺序返回完整的结果。

参考:编写高质量JS代码68个有效方法

更新: 2014/05/14

一般而言,事件与侦听器关系是一对多,但在异步编程中,也会出现事件与侦听器的关系是多对一的情况,话句话说,一个业务逻辑可能依赖多个回调或事件传递的结果。例如,在网页渲染的过程中,通常需要数据、模板、资源文件,这三者互相之间并不依赖,但最终渲染结果中三者缺一不可。如果采用默认的异步方法调用,程序也许将会如下所示:

fs.readFile(template_path, 'utf8', function(err, template) {
db.query(sql, function(err, data) {
l10n.get(function(err, resourse) {
// TODO
});
});
});

这在结果的保证上是没有问题的,问题在于这并没有利用好异步I/O带来的并发优势。这是异步编程的典型问题,为了实现最终结果的处理而导致可以并行调用但实际只能串行执行。

var count = 0;
var result = {}; // 存放查询结果
var done = function(key, value) {
result[key] = value;
count++;
count === 3 && render(result);
}; fs.readFile(template_path, 'utf8', function(err, template) {
done('template', template);
});
db.query(sql, function(err, data) {
done('data', data);
});
l10n.get(function(err, resourse) {
done('resourse', resourse);
});

JS多异步之间的协作方案的更多相关文章

  1. Node.js 和 Python之间如何进行选择?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/nodejs-vs-python-which ...

  2. js构建ui的统一异常处理方案(一)

    从早期从事基于java的服务器端开发,再到之后从事基于web和js的ui开发,总体感觉基于web页面的ui开发远不如服务器端健壮.主要是早期ie浏览器功能太弱小,很多业务被迫放到服务器端去实现,浏览器 ...

  3. js的异步和单线程

    最近,同事之间做技术分享的时候提到了一个问题"js的异步是另开一个线程吗?"当时为此争论不休.会后自己查阅了一些资料,对这个问题进行一个自我的分析与总结,有不同意见的希望可以赐教, ...

  4. 探秘JS的异步单线程

    对于通常的developer(特别是那些具备并行计算/多线程背景知识的developer)来讲,js的异步处理着实称得上诡异.而这个诡异从结果上讲,是由js的“单线程”这个特性所导致的. 我曾尝试用“ ...

  5. JS的异步模式

    JS的异步模式:1.回调函数:2.事件监听:3.观察者模式:4.promise对象 JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous) ...

  6. Node.js之异步编程

    > 文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. ![file](https://img2018.cnblogs.com/blog/830272/20 ...

  7. js构建ui的统一异常处理方案(二)

    上一篇文章,我分析了同步代码做异常处理是基于责任链模式,而通过try.catch等语句可以很容易地实现这种责任链模式.但是如果是异步调用,我们无法直接通过try.catch语句实现责任链模式,并且通过 ...

  8. Quick-Cocos2d-x v3.3 异步加载Spine方案 转

    Quick-Cocos2d-x v3.3 异步加载Spine方案 浩月难求也与2015-03-25 15:06:3441 次阅读 背景 项目中使用了Quick-Cocos2d-x 3.3,由于Spin ...

  9. 【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制

    转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93% ...

随机推荐

  1. 豆瓣FM 歌词跟随插件

    一直在用豆瓣FM,发现老是没有歌词很不方便,今天找了下.找到一个不错的插件. 插件原文地址:http://www.douban.com/group/topic/47559280/ 插件下载地址:htt ...

  2. 1.2 《硬啃设计模式》 第2章 学习设计模式需掌握的UML知识

    要看懂设计模式,你需要懂类图(Class Diagram),也需要懂一点对象图(Object Diagram),下面介绍一些UML的必要知识,以便你学习设计模式. 属性.操作 下图简单介绍类的属性和操 ...

  3. HashSet、LinkedHashSet、TreeSet

    以下内容基于jdk1.7.0_79源码: 关于HashSet.LinkedHashSet.TreeSet Set接口的实现类,最大特点是不允许出现重复元素: HashSet:基于HashMap实现,一 ...

  4. TY创新D总个人经历谈

    这是深圳一个公司的老板(就叫D总吧)在吃饭间和我们讲起的他的个人经历,这中间个人的苦辣酸甜,有些意思,值得玩味,就做了个实录. D总:我当时做餐饮是在我第一次创业失败之后.我做的是一家火锅店. 这家餐 ...

  5. U-BLOX GPS 模块及GPRMC指令解析

    受朋友所托,调试一款GPS模块,该模块是UBLOX的NEO-6M GPS模组.想到用这款GPS的人较多,自己日后也有可能在用到这个模块,就写下这份笔记. 1. 介绍 基本信息如下: 1, 模块采用U- ...

  6. 十五天精通WCF——第五天 你需要了解的三个小技巧

    一: 服务是端点的集合 当你在开发wcf的时候,你或许已经注意到了一个service可以公布多个endpoint,确实是这样,在wcf中有一句很经典的话,叫做“服务是端点的集合",就 比如说 ...

  7. 使用C/C++,赋值运算时发生的转换

    使用C/C++,赋值运算时发生的转换主要有以下四种情况 一: 两边类型不同: 结果: 自动完成类型转换! 二: 长数赋给短数: 结果: 截取长数的低位送给短数! 三: 短数赋给长数: 结果: 原来是什 ...

  8. ASP.NET 跨域

    #region 支持跨域请求 //Response.ClearHeaders(); string origin = Request.Headers["Origin"]; Respo ...

  9. Python使用QRCode模块生成二维码

    QRCode官网https://pypi.python.org/pypi/qrcode/5.1 简介python-qrcode是个用来生成二维码图片的第三方模块,依赖于 PIL 模块和 qrcode ...

  10. height:100%不起作用(无效),div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...