Ember 2, call functions in route using Ember.run.debounce


#1

I’m in a route called “game”.

In an action I call Ember.run.debounce for a function, but in that function I can’t call other functions.

app/routes/game.js:

import Ember from 'ember';
export default Ember.Route.extend({

  model() {
    ...
  },

  saveGame: function () {
    this.save().then(() => {
      this.updateOtherGames(); //<------ ERROR ERROR ERROR ERROR
    })
  },

  updateOtherGames(game) {

  },

  actions: {
    playGame(game) {
      ...
      Ember.run.debounce(game, this.saveGame, 5000);
    }
  }
})

Why I can’t call updateOtherGames?

Why this in the saveGame function is only referring to game nd not the route?


#2

It because the first argument for the bebounce method is the target - you are passing game as the target, so inside the saveGame method this is game.

Try something like this instead:

Ember.run.debounce(this, () => this.saveGame(game), 5000);

#3

Another guy on Stackoverflow answered this:

The correct usage of debounce is:

Ember.run.debounce(this, this.saveGame, game, 5000); Here is the API.

After correcting it, calling updateOtherGames will work.

What is correct? Your or this one?


#4

both are correct and both will work

read the doc for debounce here… his method may be technically better because you are not needing to wrap the callback in an arrow function… but both will work and you wouldn’t notice any difference in practical terms.

EDIT: having looked more closely at the doc… here is the method signature for debounce

debounce (target, method, args*, wait, immediate)
args* [Object]
Optional arguments to pass to the timeout.

it says args should be an Object… I’m a little confused by this… I would expect it to be an array… I haven’t tried this and so I’m not familiar with passing the args object here…

I have only used the method I originally posted… and I know that way works as intended…


#5

It’s so confusing…


#6

Ember.run.debounce(this, () => this.saveGame(game), 5000); is definitely not correct. It has no effect.

Debounce only works if you pass the same function in every time. You’re not, you’re making a new function every time you call it.