Ember.run.debounce does not debounce

Question

I am using Twitter Typeahead.js in a subcomponent in Ember which I feed a dataSource function (see below). This dataSource function queries a remote server. This query I would like to have debounced in Ember which does not seem to work.

Does this have to do with the runloop? Anything I should 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. A custom solution seemed easier at first.

Answer 1

Debounce works by creating a unique key based on the context/function. When you call it subsequent times it compares the existing keys to the context/function key passed in. You are passing in a different function every time you call debounce, which is why it isn't working how you're expecting it to work.

Answer 2

Taking the advice from @Kingpin2k I refactored the code like this:

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()

});