Ember.run.debounce nie odrzuca

Question

Używam Twittera Typeahead.js w podskładniku w Ember, którym zasilam funkcję dataSource (patrz poniżej). Ta funkcja źródła danych wysyła zapytanie do zdalnego serwera. To zapytanie chciałbym opublikować w Ember, który wydaje się nie działać.

Czy to ma związek z runloopem? Cokolwiek powinienem zawinąć?

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

}); 

Uwaga: Nie używam Bloodhound z Typeahead.js, ponieważ potrzebuję dostępu do wyników. Niestandardowe rozwiązanie wydawało się na początku łatwiejsze.

Answer 1

Wstrzymywanie polega na tworzeniu unikalnego klucza na podstawie kontekstu/funkcji. Gdy wywołasz go później, porównuje istniejące klucze z przekazanym kluczem kontekstowym/funkcyjnym. Za każdym razem, gdy wywołujesz debounce, przekazujesz inną funkcję, dlatego nie działa ona w oczekiwany sposób.

Answer 2

Biorąc porady od @ Kingpin2k I refactored kod tak:

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

});