【cocos-creator】依次运行多个action/异步操作

使用场景

在游戏制作过程中,特别是UI部分,经常会遇到需要多个不同节点依次执行不同action的情况。例如有NodeA,NodeB,NodeC3个节点,分别执行ActionA,ActionB,ActionC三个不同的action,执行顺序为A-B-C(A执行完之后才执行B)。
延伸场景:需要依次执行多个异步操作的,在cocos中,异步操作并不多,例如cc.loader.loadResDir()

先介绍一下我的方法:使用Promise封装action

Promise是ES6中针对异步编程的一种解决方案,《ES6标准入门》中的解释为:

所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

因此可以有以下伪代码:

// 封装Promise
let PromiseA = () => {
    return new Promise((resolve, reject) => {
        NodeA.runAction(cc.sequence(
            ActionA,
            cc.callFunc(() => { resolve() }),
        ))
    })
}
let PromiseB = () => {
    return new Promise((resolve, reject) => {
        NodeB.runAction(cc.sequence(
            ActionB,
            cc.callFunc(() => { resolve() }),
        ))
    })
}
let PromiseC = () => {
    return new Promise((resolve, reject) => {
        NodeC.runAction(cc.sequence(
            ActionC,
            cc.callFunc(() => { resolve() }),
        ))
    })
}
// 执行Promise
PromiseA().then(()=>{
    PromiseB().then(()=>{
        PromiseC()
    })
})

以上代码实现了顺序执行ABC。

使用Promise带来的问题

  • 【主要问题】需要多层封装,可读性差。首先,Promise在新建的时候会自动执行,因此需要使用箭头函数进行包装。其次,then()方法需要传入一个方法作为参数,层层调用,如果需要执行的动作很多,则层层回调,非常不直观。(在下一节中会针对这个问题提出优化)
  • 【次要问题】then()方法依然是一个异步操作,只是同步的写法。会导致函数在return的时候return undefined。(异步方法的return都会有这个问题)

优化使用Promise

针对以上问题,有2个优化的方向:

  • 方向1:使用Generator,或者async/await进行优化。笔者对此还没有研究,不再多写。但是需要注意的是,各个平台中对Promise都明确支持,但是对这两个特性的支持情况有所不同,要谨慎使用。
  • 方向2:写一个函数,可以依次执行多个Promise。Promise本身有Promise.all()方法和Promise.race()方法可以执行多个Promise,均是同时执行。具体函数如下所示:
    (声明:参考博客:https://www.cnblogs.com/rusr/p/8488483.html
/**
 * 依次运行多个promise
 * @param {[()=>{}]} promise_array 由于promise建立后立即执行的特性(坑),因此需要使用一个箭头函数进行包装
 * @returns {Promise}
 */
run_promise_chain(promise_array) {
    let p = Promise.resolve()
    for (let promise of promise_array) {
        p = p.then(promise)
    }
    return p
}
/**
 * 依次运行多个promise(有缺点)
 * - 使用递归算法
 * - 【注意】 异步操作无法使用尾递归优化
 * - 【注意】 异步操作无法返回一个正常的返回值(异步函数会直接返回undefined),应该无法在此函数后使用then()
 * @param {[()=>{}]} promise_array
 * @returns {undefined}
 */
run_promise_chain_with_recursive(promise_array) {
    if (promise_array.length === 0) { return }
    let a = promise_array.shift()
    a().then(() => {
        this.run_promise_chain_with_recursive(promise_array)
    })
}

以上2种封装函数,第1种其实我也没有搞懂为什么就可以实现,还在不断学习中,但是总之能实现,并且返回一个Promise。第2种是我采用递归函数做的,有1个缺点就是异步操作没有返回值(我查询了一些资料,了解到异步操作也是可以有返回值的,所以这部分我还在不断改进),导致无法使用尾递归优化和判定全部Promise执行完毕。因此目前推荐使用第1种。

补充介绍:非Promise方法,“传统的”cocos方法

方法1:ScheduleOnce()

获取到ActionA,ActionB,ActionC的完成时间,设为TimeA,TimeB,TimeC,伪代码如下:

NodeA.runAction(ActionA)
this.scheduleOnce(() => {
    NodeB.runAction(ActionB)
}, TimeA)
this.scheduleOnce(() => {
    NodeC.runAction(ActionC)
}, TimeA + TimeB)

方法2:标志位

这个方法太蠢了,不建议使用。思路就是给ActionA设置一个标志位,然后每隔一段时间检测一次标志位,检测成功则执行ActionB。

最后总结

  • 尽量少使用异步操作。
  • 如果非要使用,则尽量避免陷入“依次执行异步操作”这个坑,写起来比较麻烦,理解起来也比较麻烦。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容

  • 你不知道JS:异步 第三章:Promises 接上篇3-1 错误处理(Error Handling) 在异步编程中...
    purple_force阅读 1,391评论 0 2
  • title: promise总结 总结在前 前言 下文类似 Promise#then、Promise#resolv...
    JyLie阅读 12,234评论 1 21
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 8,678评论 0 29
  • 一个传奇女人的故事,情节引人入胜。严歌苓一惯的作品风格。人性,传奇,美女。 我的心随之波动,当凤儿在听大奶奶李淡云...
    niuniuniu阅读 216评论 0 0
  • “终于考完了!”这句话不止我一个人在说,几乎班里的每个同学都像复读机一样,重复着这句话。转头环顾四周,有的同学...
    cy诺ooo阅读 318评论 0 4