When doing search function, you always need to consider about the concurrent requests.
AEvent ----(6s)---> AResult
------(100ms)-------
BEvent -----(1s)---> BResult
It means A event needs to take 6 seconds to get the result, but B only need 1 second, in the between there is 100ms.
So B result will appear on the DOM first, but later will be overwritten by A result once A finished.
To overcome this problem, we can use RxJS:
class HelpSearchCtrl {
constructor(HelpSearchService, $scope, $log) {
this.HelpSearchService = HelpSearchService;
this.searchTerm = null;
this.$log = $log;
this.$scope = $scope; let listener = Rx.Observable.create( (observe)=>{ this.$scope.$watch( ()=>{
return this.searchTerm;
}, ()=>{
observe.onNext(this.searchTerm);
})
})
.debounce(500)
.flatMapLatest( (searchTerm)=> {
return Rx.Observable.fromPromise(this.doSearch(searchTerm));
}).subscribe(); this.$scope.$on('$destory', ()=>{
this.$log.debug('cancelled!');
listener.dispose();
})
} doSearch(searchTerm) {
return this.HelpSearchService.searchForContent(searchTerm);
}
} const clmHelpSearchDirective = () => {
return {
restrict: 'EA',
scope: {},
replace: true,
template: require('./help-search.html'),
controller: HelpSearchCtrl,
controllerAs: 'vm',
bindToController: true
}
}; export default (ngModule)=> {
ngModule.directive('clmHelpSearch', clmHelpSearchDirective);
}