Ember.run.debounce not debugging

Question

I use Twitter Typeahead.js in a subcomponent in Ember, which I pass to the dataSource function (see below). This dataSource function requests a remote server. This request, which I would like to discuss in Ember, which does not seem to work.

Is this related to runloop? All I have to wrap?

import Ember from 'ember'; export default Ember.Component.extend({ dataResponse: [], dataSource: function () { var component = this; // function given to typeahead.js return function (query, cb) { var requestFunc = function () { var encQuery = encodeURIComponent(query); Ember.$.getJSON('/api/autocompletion?prefix=' + encQuery).then(function (result) { // save results component.set('dataResponse', result.autocompletion); // map results var mappedResult = Ember.$.map(result.autocompletion, function (item) { return { value: item }; }); cb(mappedResult); }); }; // this is not debounced, why? :| Ember.run.debounce(this, requestFunc, 500); // debounce by 500ms }; }.property() }); 

Note. I do not use Bloodhound with Typeahead.js since I need access to the results. At first, the custom solution was simpler.

Answer 1

Debounce works by creating a unique key based on context / function. When you call it at subsequent times, it compares the existing keys with the passed context / function key. Each time you call debounce, you pass a different function, so it does not work, as you expect it to work.

Answer 2

Taking advice from @ Kingpin2k, I reorganized the code as follows:

 import Ember from 'ember'; export default Ember.Component.extend({ dataResponse: [], dataSource: function () { var component = this; var queryString = null; var callBack = null; var requestFunc = function () { var encQuery = encodeURIComponent(queryString); Ember.$.getJSON('/api/autocompletion?prefix=' + encQuery).then(function (result) { // save results component.set('dataResponse', result.autocompletion); var mappedResult = Ember.$.map(result.autocompletion, function (item) { return { value: item }; }); callBack(mappedResult); }); }; // function used for typeahead return function (q, cb) { queryString = q; callBack = cb; Ember.run.debounce(this, requestFunc, 500); // debounce by 500ms }; }.property() });