场景:使用工具函数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. Azure File

    Azure File 服务使用标准 SMB 2.1 协议提供文件共享.Azure 中运行的应用程序现在可以使用熟悉的标准文件系统 API(如 ReadFile 和 WriteFile)在虚拟机之间轻松 ...

  2. MDX函数(官方顺序,带示例)

    MDX函数(官方顺序) 1.  AddCalculatedMembers (MDX) 返回通过将计算成员添加到指定集而生成的集. 语法: AddCalculatedMembers(Set_Expres ...

  3. 继续说一下2016里面的json功能(1)

    首先先来测试数据,数据是使用之前的,就 不要在意这些细节了啊~ 借用上一篇的测试数据 ),Chinese int ,Math int) ,),(,),(,),(,null); 然后我们使用这个表里面生 ...

  4. dubbo-admin-2.5.3 运行报错: Bean property 'URIType' is not writable or has an invalid 解决方法

    因为 jdk 是1.8的版本,和 dubbo-admin 存在兼容性问题.所以报错: Bean property 'URIType' is not writable or has an invalid ...

  5. 使用Spring MVC 实现 国际化

    使用Spring MVC 实现 国际化     博客分类: Spring   1. 版本 Spring 3.1   2. 配置 LocaleResolver     LocaleResolver 是指 ...

  6. HTTP协议小结

    HTTP/0.9已过时.只接受GET一种请求方法,没有在通讯中指定版本号,且不支持请求头.由于该版本不支持POST方法,因此客户端无法向服务器传递太多信息. HTTP/1.0 这是第一个在通讯中指定版 ...

  7. linux centos6.5 ftp网页vsftpd配置

    安装命令centos下 yum install vsftpd 出现“Complete!”时意味着安装完成.Linux中,系统对于大小写严格区分,比如abc和ABC是完全不相同的字符,要特别注意.配置V ...

  8. AngularJS几个基础概念

    作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方.作用域是视图和作用域之间的胶水.在应用将视图渲染并呈现 ...

  9. ganglia安装简记

    首先需要安装EPEL的源. yum install -y ganglia.x86_64 ganglia-gmetad.x86_64 ganglia-web.x86_64 ganglia-gmond.x ...

  10. ios移动端切图及前端规范

    移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1.    设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X133 ...