Best alternative to declaring event listeners in a loop
prajwal.be.21

Hey, 

So I have pawns as game objects and I'm creating individual instances of the pawns in a for loop. The creating instances is not a problem but adding event listeners to each individual game object/ pawn within the loop seems to be quite a buggy way of approaching this.

Is there a better way of adding event listeners to each game object than inside a loop? The editor too suggests me not to create a function within a loop.
Should I individually add event listeners for each pawn?

Please help!

All 6 Comments
krumza

Hi. I dont see yor code but if mean creating multiple objects - best way - create one as template and then clone it . If i think about chess pawn - it only 16 and it not serious problem/

I think that some code examle need for more deep answer.

 

prajwal.be.21

Hey Krumza,

Actually I just have to setup only 12 pawns :P But I was doing this in a loop like this 

for (var i = 0; i < 12; i++) {
  wade.addEventListener(self.bluePawns[i], 'onMouseDown');
  
//Blue mousedown
  self.bluePawns[i].onMouseDown = function (data) {
    if (self.turn === 'blue') {
       // More Code
    }
    self.errorCode = 0;
  };
}

This is bad practice I suppose?

krumza

i dont see any criminal in your code, but you can do this same ways:

- create one sceneobject as template and add event listeners to it  - then in loop you clone this template and all new clones take same event listners as template

- create one sceneobject and also create behaviour  - then cloning it in loop and add behaviour to all new clones

- keep it as is

 

 

prajwal.be.21

Thanks Krumza, I was only worried because the editor threw a notification 'do not create functions in loop'.

I'm gonna try the sceneobject template and clone approach. Fast yet consistent all over. Thanks once again.

Gio

Hey Prajwal

What krumza said above is correct. I just wanted to add that you probably shouldn't worry too much about it unless it appears to be a problem when you profile your game.

The editor uses a 3rd party JavaScript parser that shows you that warning, because generally it's not very good practice to create functions in a loop. It is generally faster to define the function outside the loop, then set all your objects / clones to use that same instance of the function. So in your case, the warning message in the editor is suggesting that you should do:

var onMouseDown = function (data) {
    if (self.turn === 'blue') {
       // More Code
    }

for (var i = 0; i < 12; i++) {
  wade.addEventListener(self.bluePawns[i], 'onMouseDown');
  
//Blue mousedown
  self.bluePawns[i].onMouseDown = onMouseDown;
    self.errorCode = 0;
  };
}

As you can see, this way all your objects use the same function, you don't have a copy of the function for each object. But like I said, this is a small optimization that is unlikely to make any real difference to the performance of your game.

Having said that, I would agree that using a template and a clone is the easiest and cleanest approach here.

prajwal.be.21

Hey Gio,

Thanks, that makes sense. I was running into problems with movement of pawns on board. Had a hard time working to find what pawn was clicked and moving it. And 'this' scope was not working as expected on the sceneobject. I may try the clone solution in editor though, since it's pretty simple to implement.

Thanks Gio!

Post a reply
Add Attachment
Submit Reply
Login to Reply