JavaScript/Cocos中如何确保前序函数动作完成后再调用后续函数

当前问题的本质是cc.moveTo属于引擎异步调度的动画动作，不会阻塞当前同步代码的执行流程，因此直接在function1调用后同步执行function2，必然会出现动作还没跑完就触发隐藏的问题。之前用cc.delayTime方案适配性差的核心原因是：硬编码延迟时长是靠估算兜底，既会因为帧率波动出现时序偏差，也无法处理动作被主动打断、提前终止的异常场景。

具体实现方式 #

完全依靠引擎的动作调度机制绑定执行时序，把function2的触发逻辑嵌入到function1的动作执行链末尾，让引擎在移动动作跑完的瞬间自动触发后续逻辑：

• 移除外层代码中对function2的同步直接调用，所有时序逻辑交给function1内部的动作流程控制
• 在function1中，把原本单独运行的移动动作、执行function2的回调动作打包成连续序列，一次性交给节点执行
  改造后的代码参考：
  外层判断逻辑调整为：

if (condition == 'true'){
    this.function1();
}

调整后的function1实现：

function1(){
    const spriteNode = this.node.getChildByName("spriteName");
    spriteNode.active = true;

    // 构造需要顺序执行的动作队列
    const moveStep = cc.moveTo(0.1, x, y);
    // 将function2的执行逻辑包装成动作回调，绑定在队列末尾
    const endCallback = cc.callFunc(() => {
        this.function2();
    }, this);
    // 让引擎按顺序执行：先完成移动，再触发回调
    spriteNode.runAction(cc.sequence(moveStep, endCallback));
}

原有function2的代码不需要做任何修改。

常见问题说明 #

• 相比硬编码延迟的方案，这套机制的触发时机完全和动作实际执行进度绑定：只有移动动作完整跑完才会触发回调，不会出现动作还在执行就提前触发隐藏的问题
• 如果后续需要调整移动动画的时长，只需要修改cc.moveTo的第一个时间参数即可，不需要同步修改回调的触发逻辑
• 如果存在动画被主动中断的场景（比如页面关闭、节点提前销毁），可以将生成的序列动作存为节点的属性，在中断逻辑里同步把对应sprite的active状态重置为false，避免出现状态不一致的问题

内容的提问来源于stack exchange，提问作者Kaverappa PH