listener in javascript

[espace]

Hi, 

I have a sprite and i listen his scale. When his scale is bigger than 2, i do an action.

The problem for me is : i'm in a update function and i must lock my action to launch it one time. 

Is there not a better solution who avoid the use of flag ? For example with the language lua => corona, we have listeners who avoid this situation...

var lock_action = (obj, callback) => {
	if (obj.flag == false) {
		obj.flag = true;
		callback();
	}
}

var doSomething=()=>{console.log("done")};

// in update function
if(obj.scale.x > 2){
    lock_action(obj,doSomething)
}

 

[mattstyles]

You're doing this very naively, so you'd need the flag.

The alternative is to implement an actual event pub/sub system (ala addEventListener, or, any pub/sub implementation out there) on your object i.e.

import EventEmitter from 'eventemitter3'

export const onChange = 'sprite:onChange'

export class Sprite extends EventEmitter {
  scale = {
    x: 1,
    y: 1
  }

  setScale (x, y) {
    this.scale = { x, y }
    this.emit(onChange, {
      type: 'scale',
      payload: this.scale
    })
  }
}

import { Sprite, onChange } from 'sprite'

function doSomething () {
  console.log('doing something arguments:', ...arguments)
}

const sprite = new Sprite()

sprite.once(onChange, doSomething)

Note I'm using ES6 syntax (inc. module syntax) and I haven't tested any of this (I rarely use classes so might have mixed up context or some other stupid error) but hopefully it's easy enough to follow.

eventEmitter3 is a really simple pub/sub module and is a really standard implementation. `on` and `off` functions are analogous to DOM `addEventListener` and `removeEventListener`, the `once` method used here is just sugar around removing the handler/callback after the first time it is triggered.

This actually functionally gets you to the same place you're already at, albeit without some implicit state hanging around. Depending on your exact use-case this might be more or less useful to you.

What this is doing:

* Attach a function to list of functions, key it against a string identifier (this is the event)

* On another function call (emit) check the list of functions for the string which was emitted

* Fire the function when the string is matched

* Remove the function from the list of functions to check i.e. the next time that string is used it won't match that function again

What you are doing:

* Inspecting an object for changes by polling

* Reacting to any detected changes by invoking a function

* Deciding a course of action from within the function

In different scenarios both of these approaches have merit so it's up to you which you prefer. Probably the 'most popular' way of solving this sort of problem is with pub/sub.