[SOLVED] Delay before executing next line

In my objectPicker.js file I am trying to enable a screen for a few seconds (right now it just says “beans” as a placeholder) and then make it disappear. I tried using setTimeout on line 57, but it doesn’t seem to have any effect. I tried removing if(this.ischeck === true) but then the text element just never shows up. It is also now impossible to open the door with the key (the red box). This is the code from line 60 to 63.
Project: PlayCanvas | HTML5 Game Engine
To trigger the event, walk over to the door with WASD and press E while loooking at it.

setTimeout isn’t the best approach for this. A very simple solution is to use a countdown timer variable in your objectPicker.js file.

For example, replace the setTimeout lines with: this._beanCountdown = 3; The 3 is a 3 second countdown timer, you can set this to whatever number you want.

Then add an update method to your objectPicker.js script like so:

DragAndDrop.prototype.update = function (dt) {
    if (this._beanCountdown > 0) {
        this._beanCountdown -= dt;
        if (this._beanCountdown <= 0) {
            this.app.root.findByName("bean-screen").enabled = false;

They key detail here is the dt variable. In every update call, this dt variable will be the time in seconds since the last update. At 60fps, it’ll be 0.01666s. Inside the update function, it’ll gradually decrease the this._beanCountdown variable, when it reaches 0, it’ll hide your bean-screen entity.

1 Like

I think the topic below is related to why your timeout is not working as expected.

1 Like

Cool, but if it’s an update function, doesn’t that mean that it’ll happen all the time? I only want it to happen when you press E on the door.

Yes, update functions are executed on every frame. If you don’t want to do that. Check out the thread that @Albertos linked, it shows you how to bind the setTimeout correctly.

Great. Can you show me how/where I can use that in my script? It seems like the context is different in the other question and I am not sure what parameters to change

Your issue was that you were trying to access a script variable with this. inside the setTimeout function. By default, the code inside the setTimeout function doesn’t know about any of the variables in your script because they are ‘outside’ the callback function. If you want the code inside the setTimeout function to know about the variables in your script, you need to bind it.

For example:

      this.app.root.findByName("bean-screen").enabled = false;
}.bind(this), 3000);

Notice the addition of bind(this). This allows you to use this. inside the setTimeout callback function. Be aware, this concept applies to all callback functions not just setTimeout so it’s worthwhile to take some time to understand it well.


Oh, ok.
Also, after deleting the first setTimeout function, the door stopped opening. I figured out it has something to do with the code on line 59. Without it, it works. Did I get the syntax wrong?

Before the door can open, your code is checking if key is enabled. It looks like the key is not enabled by default which is why the code to open the door doesn’t run.

Yeah, that’s because you need to pick up the key before you can open the door. Once you pick up the key, it’s enabled, which should allow you to open the door.

When you pick up the key, you’re setting this.dragging to true, but the drag function logic doesn’t run unless this.dragging is false which is why your door code isn’t running.


OK, I tried putting if(this.dragging === true) but now on line 60 it’s telling me that the variable “result” is used out of scope. So I tried defining it under line 57 but it’s telling me it’s already defined. What do I do?
Edit: I just figured it out. All I have to do is remove this.dragging = true when picking up the key.

1 Like