Question

我有一个引擎，它有一个方法tick可以在timeout上反复调用。在tick函数中，我在timeout再次调用自身之前调用了其他函数。这些函数基本上完全相同，只是它们在对象上调用不同的方法。

我想将这些函数从循环更改为dispatchEvent，并执行自定义事件。我面临的问题是，我想知道该事件何时被捕获。例如，当我运行start()时，我想知道所有启动方法何时完成，或者当所有更新方法都已完成时运行update()时知道。

我想这样做是因为我希望所有对象一起运行方法组，而不是为了方便。例如，我说obj1和obj2我不希望obj1运行它的启动方法，而obj2已经在运行update方法。我希望他们所有人同时运行相同的方法。

我在循环遍历对象时获得了这个效果，但是它同步运行，而不是异步运行。

class Engine {
    private static objects = [];
    public constructor() {
        setTimeout(tick.bind(this), 0);
    }
    public tick() {
        start();
        update();
        lateUpdate();
        // etc.
        setTimeout(tick.bind(this), 0);
    }
    public update() {
        objects.forEach(object => {
            if(typeof object['update'] == 'function') {
                object['update']();
            }
        });
    }
}

以这个例子为例，我将其修改为我想要做的事情（更新方法）：

class Engine {
    private static objects = [];
    public constructor() {
        setTimeout(tick.bind(this), 0);
    }
    public tick() {
        start();
        update();
        lateUpdate();
        // etc.
        setTimeout(tick.bind(this), 0);
    }
    public update() {
        window.dispatchEvent(new CustomEvent('update'));
        // Stop here and wait until all events finish.
        // Once all events finish on all objects, continue on
    }
}

这是一个添加到每个对象的组件类：

class AutoMove extends Canvas.Behavior {
    constructor() {
        super();
        this.speed = 3;
    }
    update() {
        // translate just add (this.x += x, and this.y += y) to the items current position
        this.transform.translate(this.speed, 0);
    }
}

我的实际更新调用看起来像这样（我在上面简化了）：

update() {
    this.objects.forEach(object => {
        object.components.forEach(comp => {
            if(typeof comp['update'] == 'function') {
                // This calls the update in the above component
                comp['update'](); 
            }
        });
    });
}

一旦我有大约500到600个对象，对象开始从左向右移动越来越慢，随着对象数量的增加，它变慢。我目前还没有添加逻辑来不将视图渲染出来，所以这也可能是问题。

对象也在setInterval上创建以进行测试。

如何判断一组事件何时完成

0 个答案: