async.js在Cocos Creator中的应用

一、在Cocos Creator中使用async.js库

在Cocos Creator项目中async.js有两种引方式：

1. npm安装方式

2. 源码插件方式

下面分别介绍这两种的具体操作步骤

npm安装方式

使用npm管理三方模块，首先需要在Cocos Creator项目中初始化npm的包管理配置文件package.json，在输入行中输入：

> npm init

输入命令后，会要求输入一些信息，这不是我们的重点，一路回车即可，操作完成后会在项目根目录创建一个package.json的文件，内容如下：

然后我们使用npm安装async模块：

npm install async --save

输入上面命令后，会输出一些信息，没有意外，不到10秒就安装好了，看下图：

安装好后npm会在当前目录创建一个node_modules的目录，打开后你可以看到async模块目录：

确保node_modules下的async目录存在，就可以在项目中使用async的。

2. 源码插件方式

有的人可能不习惯使用npm方式，我们可以从npm模块中将async.js的发布源码复制到工程assets目录中，然后把node_modules目录删除，看下图：

只需要将aysnc.js或async.min.js其中一个文件入assets就可以了。将文件放入assets目录，激活Cocos Creator时会提示，是否需要设置为插件，看下图：

设置为插件async会成为一个全局模块，在使用的地方不需要用require进行导入，直接直接使用即可。

以上这两种方式构建项目都可以让async.js在微信小游戏环境中运行。

二、 async.js应用场景

Shawn在使用async主要应对下面三种场景

1. 创建大量对象时减少卡顿

上图中使用async.eachLimit可以控制在遍历array变量时的并发数量，每帧调用20次 this._createTile 函数，它是在实例化prefab是一个耗时的操作。

我这里做了一个小测试，比较使用普通循环与async异步实例化1000个prefab的情况：

【插入视频】

不知道你是否从视频中看出点什么？ 使用普通循环创建时，可以看到视频中红色方块有瞬间的停顿，因为它是在1帧里面做了1000次，async异步实例化是将这1000次循环分散到了n帧去做（其实总消耗的时间会更长）。

2. 让异步逻辑流程更清晰

当有一系列异步函数需要串行执行时，asyc.series可以很方便帮助我们解决此问题，从回调地狱中解脱出来。

3. 让异步动画灵活多变

动画的执行都需要有时间，因此也存在大量的异步控制逻辑，我们可以使用一个个的小函数将动画播放逻辑控制起来，并提供一个完成回调。

然后再用async.series将它们串连起来，而且动画的播放顺序可以根据需求灵活调整。

Shawn之前还有一篇教程 《英雄之舞—凌波微步(利用async.js编写异步动画)》 中对async.js在动画控制中有更多的说明，如有兴趣可以参考此篇教程。

三、小结

异步编程是JavaScript语言的一大特色，异步控制的方案流行的还有Promises、async-await，async.js仅仅只是其中的一种，如果你有更好的JavaScript异步编程经验或方案、案例欢迎留言讨论。

源码：公众号中回复“async”即可获取