Waiting for image render before updating other elements

I have a HUD scene with:

  • a group of images in a group called terrainGroup.
  • another image to generate a random terrain

On my main scene I have

  • a method which generates a new random terrain
  • an event emitter which is passed to the HUD scene.
    //On main scene
    this.scene.launch('EditorHudScene',{emitter: emitter});

    //Random terrain button on HUD scene
            dice.on('pointerup', ()=>{
                this.terrainGroup.setVisible(false);
                this.detailGroups.forEach((g)=> {g.group.setVisible(false);});
                this.emitQueue.push('newrandom'); // just an array
            }, this);

    // HUD Scene update method
        update(time): void {
            // if event queue has items
            if(this.emitQueue.length > 0){
                let item: Phaser.GameObjects.GameObject = this.terrainGroup.children.getArray()[0];
                let image = item as Phaser.GameObjects.Image;
                if(!image.visible){ // this should delay
                    var target = this.emitQueue.shift();
                    this.emitter.emit(target);
                }
            }
        }

I’m expecting the check for visible should delay the random scene generation until after the buttons have become invisible.

Such is not the case.

Ok, I’ve I set a counter and force it to wait until the next update is called, it works.