good syntax to add a timer

[espace]

hi,

i have some difficulties with the timer :

• i want to start a function after a certain delay.

i use this but that don't work :

game.time.events.add(Phaser.Timer.SECOND*4, displacement_test(),this);

TypeError: this.events[this._i].callback is undefined

• is it also not possible to specify a delay in milliseconds ? in the doc i don't see this possbility expect with game.time.events.loop

thanks for your help.

[DegGa]

Just remove "()" at the end of "displacement_test" and it should work

[DegGa]

You can specify a delay in milliseconds just by replacing the first argument (Phaser.Timer.SECOND*4) with the number of millisecondes (1 seconde is 1000 millisecondes).

[espace]

Hi DegGa,

Thanks for your reply. I didn't say everything. My function displacement_test have argument. How do you déclaré this so ?

[mattstyles]

The () invokes your function and passes whatever it returns to be used as a callback, which is probably nothing, hence, explosion.

There are 2 quick options, either work out your architecture so that you either don't need the argument or you get from somewhere else, or wrap the callback to explicitly invoke your function i.e.

game.time.event.add(4000, () => displacement_test(args), this)

// or, old school

game.time.event.add(4000, function timer () {
  displacement_test(args)
}, this)

You could even wrap it in a thunk or curry the function to supply the parameters, but maybe you don't want to get into that.

Bare in mind that I expect the callback is invoked with arguments of its own, which you may or may not want to handle.

[espace]

hi mattstyles

i was surprised with that symbol :

=>

your solution work very well, thanks

[mattstyles]

Ha ha, sorry, thats an es2016 thing, a lambda, or fat arrow, or anonymous function. It works in all new browsers now but for slightly older safari and IE you'll need to transpile, I'm guessing you worked it out but its just sugar for:

game.time.event.add(4000, function () { 
  return displacement_test(args)
}, this)

I've added a return in there because () => fn() has an implicit return, but in your case you don't need it.

If you read about arrow functions some people believe an advantage is that they have the scope of their surrounding block but this isn't strictly true, they literally have no scope and so usually inherit the surrounding scope (not necessarily parent scope) but the scope can still be mutated as with all JS functions. They are particularly useful when used in a functional programming style, where you might very often chain functions together to produce a complex transform from a number of smaller reusable functions i.e. (caution, this example uses some other ES2016 syntax, namely destructuring and string templating)

const getName = ({name}) => name
const says = name => `${name} says hello`

const originalArray = [
  {name: 'foo', id: 1},
  {name: 'bar', id: 2}
]

const speaking = originalArray
  .map(getName)
  .map(says)

console.log('speaking')
// ['foo says hello', 'bar says hello']

This example would be trivial to rewrite to ES2015 but this is just a little more concise and encourages you to be more minimal, which is generally a good thing as it enforces simplification and makes each function far clearer what it does and how (of course, if you're simplifying for the purpose of being concise then thats not so good).

Hopefully its pretty clear, even if you aren't confident with the newer syntax, that the first mapping function pulls out the name from an object and returns it as a string, the 2nd one then mutates the string to append some more text to it.