在上一个函数的操作完成后调用一个函数

Question

我有以下 JavaScript 代码：

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

函数 1() 代码：

function1(){
    this.node.getChildByName("spriteName").active = true;
    this.node.getChildByName("spriteName").runAction(cc.moveTo(0.1, x, y));
}

function2() 代码：

function2(){
    this.node.getChildByName("spriteName").active = false;
}

如何确保仅在 function1 完成后才调用 function2？我试过 cc.delayTime() 但不合适。

Answer 1

我假设您正在使用 Cocos Creator 2.4。

动作系统目前已弃用（改为source). It might be wise to use cc.tween。

使用 cc.tween 的解决方案（推荐）

您可以使用cc.tween methods such as to and call移动节点并调用方法。

例子

这是一个使用您提供的代码（在 TypeScript 中）制作的示例。

const {ccclass, property} = cc._decorator;

@ccclass
export default class TestScript extends cc.Component
{
    private x: number = 15;
    private y: number = 15;

    start()
    {
        this.function1();
    }

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

        cc.tween(sprite)
            .to(1, { position: cc.v3(this.x, this.y, 0) })
            .call(() => this.function2())
            .start();
    }

    function2()
    {
        this.node.getChildByName("spriteName").active = false;
    }
}

使用操作系统的解决方案（已弃用）

如果您仍希望保留最初的解决方案，您可以使用 cc.sequence and cc.callFunc 在操作完成后调用方法。第一个方法将用于依次调用动作，另一个将用作仅调用方法的动作。

例子

这是使用您提供的代码（在 TypeScript 中）制作的另一个示例。

const {ccclass, property} = cc._decorator;

@ccclass
export default class TestScript extends cc.Component
{
    private x: number = 15;
    private y: number = 15;

    start()
    {
        this.function1();
    }

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

        const moveAndDisable = cc.sequence(
            cc.moveTo(1, this.x, this.y),
            cc.callFunc(() => this.function2()));
        
        sprite.runAction(moveAndDisable);
    }

    function2()
    {
        this.node.getChildByName("spriteName").active = false;
    }
}

额外的解决方案 - cc.tween + Promise

如果您希望同时移动多个具有不同持续时间的对象，但希望在所有对象都完成移动后运行一个方法，您可以使用cc.tween in combination with Promise class。

例子

const {ccclass, property} = cc._decorator;

@ccclass
export default class TestScript extends cc.Component
{
    @property(cc.Sprite)
    private sprite1: cc.Sprite = null;

    @property(cc.Sprite)
    private sprite2: cc.Sprite = null;

    @property(cc.Sprite)
    private sprite3: cc.Sprite = null;

    private x: number = 15;
    private y: number = 15;

    start()
    {
        this.function1();
    }

    function1()
    {
        Promise
            .all([
                this.moveNodeToPosition(this.sprite1.node, cc.v3(this.x, this.y, 0), 1.0),
                this.moveNodeToPosition(this.sprite2.node, cc.v3(this.x, this.y, 0), 1.5),
                this.moveNodeToPosition(this.sprite3.node, cc.v3(this.x, this.y, 0), 2.0),
            ])
            .then(this.function2);
    }

    function2()
    {
        cc.log("done");
    }

    moveNodeToPosition(
        target: cc.Node,
        position: cc.Vec3,
        duration: number) : Promise<unknown>
    {
        return new Promise(resolve =>
        {
            cc.tween(target)
                .to(duration, { position: position })
                .call(() => resolve(null))
                .start();
        });
    }
}

在上一个函数的操作完成后调用一个函数

Call a function after action from previous function is completed

typescript

cocoscreator

使用 cc.tween 的解决方案（推荐）

例子

使用操作系统的解决方案（已弃用）

例子

额外的解决方案 - cc.tween + Promise

例子