Warning about using debounce together with onSet

[ogonkov]

Someone (like me) could decide that debounce could be applied here.

[akre54]

How about something more descriptive about the problem and a solution?

Did you find a good solution? Seems to me this should work:

View = Backbone.View.extend({
  bindings: {
    '.foo': {
      onSet: function() { this.doSomething(); }
    }
  },
  initialize: function() {
    this.doSomething = _.debounce(this.doSomething, 500);
  },
  render: function() {
    this.stickit();
  },
  doSomething: function() {
    this.counter++;
  }
});

[ogonkov]

In your example model property would be set to undefined, isn't it?

I've write some suggestions in original thread #248.

[akre54]

This isn't a full example, it's just to give you a sense of how it should look. Can you put up a small jsfiddle (smaller than the last one please) that shows your issue and we'll try to debug through it?

[spectras]

This cannot work, because this should not work in the first place, it is a misuse of onSet.
The onSet method must return the actual value that will be applied onto the model. So any form of asynchronicity in onSet is ruled out.

What happens is _.debounce setups a timer, and returns immediately. It cannot return the result of the debounced function, because the function has not executed yet (that's the point of debouncing). Therefore it just returns nothing, so your onSet returns undefined and the model attribute gets set to undefined.
Working as intended.

Now, there are two ways to approach the problem.

• Have stickit change the semantics of onSet so it mirrors update. That would make it responsible for setting model attributes, and its return value would be ignored. Probably more consistent with the way onGet → update works, but would be a breaking change for all users of stickit.
• Use the set callback. It looks it is not documented yet, but from the code I see if it is defined, it overrides the actual setting of the value returned by onSet. Debouncing it will work.

Sample using the set callback:

bindings: {
    '.selector' {
        observe: 'attrib',
        set: 'debouncedSetAttrib'
    }
},
initialize: function () {
    this.debouncedSetAttrib = _.debounce(_.bind(this.setAttrib, this), 500);
},
setAttrib: function (attr, val, options, config) {
    this.model.set(attr, val, options);
}

To sum it up in one point: you debounce functions that do things, not functions that return things.
Hope it helps.

[ogonkov]

I was so stupid