Delaying actions using Decentraland's ECS

Question

How do I make an action occur with a delay, but after a timeout?

The setTimeout() function doesn’t work in Decentraland scenes, so is there an alternative?

For example, I want an entity to wait 300 milliseconds after it’s clicked before I remove it from the engine.

Answer 1

A few years late, but the OP's selected answer is kind of deprecated because you can accomplish a delay doing:

import { Delay } from "node_modules/decentraland-ecs-utils/timer/component/delay"

const ent = new Entity
ent.addComponent(new Delay(3 * 1000, () => {
    // this code will run when time is up
}))

Read the docs.

Answer 2

Use the utils.Delay() function in the utils library. This function just takes the delay time in milliseconds, and the function you want to execute.

Here's the full documentation, explaining how to add the library + how to use this function, including example code:

https://www.npmjs.com/package/decentraland-ecs-utils

Answer 3

To implement this you’ll have to create:

• A custom component to keep track of time
• A component group to keep track of all the entities with a delay in the scene
• A system that updates the timers con all these components on each frame.

It sounds rather complicated, but once you created one delay, implementing another delay only takes one line.

The component:

@Component("timerDelay")
export class Delay implements ITimerComponent{
    elapsedTime: number;
    targetTime: number;
    onTargetTimeReached: (ownerEntity: IEntity) => void;
    private onTimeReachedCallback?: ()=> void

    /**
     * @param millisecs amount of time in milliseconds
     * @param onTimeReachedCallback callback for when time is reached
     */
    constructor(millisecs: number, onTimeReachedCallback?: ()=> void){
        this.elapsedTime = 0
        this.targetTime = millisecs / 1000
        this.onTimeReachedCallback = onTimeReachedCallback
        this.onTargetTimeReached = (entity)=>{
            if (this.onTimeReachedCallback) this.onTimeReachedCallback()
            entity.removeComponent(this)
        }
    }
}

The component group:

export const delayedEntities = engine.getComponentGroup(Delay)

The system:

// define system

class TimerSystem implements ISystem {   

        update(dt: number){
            for (let entity of delayedEntities.entities) {
                let timerComponent = entity.getComponent(component)
                timerComponent.elapsedTime += dt
                if (timerComponent.elapsedTime >= timerComponent.targetTime){
                    timerComponent.onTargetTimeReached(entity)
                }
            })
        }    
    }

// instance system
engine.addSystem(new TimerSystem())

Once all these parts are in place, you can simply do the following to delay an execution in your scene:

const myEntity = new Entity()

myEntity.addComponent(new Delay(1000, () => {
    log("time ran out")
}))

engine.addEntity(myEntity)