[AngularJS + RxJS] Search with RxJS
with angularjs search Rxjs
2023-09-14 08:59:20 时间
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); }
相关文章
- vant安装报错npm WARN read-shrinkwrap This version of npm is compatible with lockfile
- ORA-23490: extension request “string” with status “string” not allowed in this operation ORACLE 报错 故障修复 远程处理
- ORA-24060: cannot convert QUEUE_TABLE, string already is compatible with release string ORACLE 报错 故障修复 远程处理
- ORA-24754: cannot start new transaction with an active transaction ORACLE 报错 故障修复 远程处理
- ORA-38790: BEFORE must be specified with RESETLOGS ORACLE 报错 故障修复 远程处理
- ORA-53046: tag: string collides with existing tag: string in document: string ORACLE 报错 故障修复 远程处理
- ORA-56708: Could not find any datafiles with asynchronous i/o capability ORACLE 报错 故障修复 远程处理
- ORA-00489: ARB* process terminated with error ORACLE 报错 故障修复 远程处理
- ORA-00830: cannot set statistics_level to BASIC with auto-tune SGA enabled ORACLE 报错 故障修复 远程处理
- ORA-13065: cannot delete a child layer with a parent layer ORACLE 报错 故障修复 远程处理
- ORA-14291: cannot EXCHANGE a composite partition with a non-partitioned table ORACLE 报错 故障修复 远程处理
- 语句掌握Oracle中用WITH语句的利用技巧(oracle的with)
- Master Linux C with Comprehensive OneStop Learning(linuxc一站式学习)
- Master the Essentials of Linux Administration with ABS: Your Ultimate Guide to a Successful Career!(linuxabs)
- Boost Your Programming Skills with Linux Development(linux开发程序)
- 分析学习Oracle深入理解使用With 分析(oracle使用with)
- 语句使用Oracle两个WITH语句实现数据查询(oracle两个with)
- 从Oracle中挖掘洞见坚实的With表(oracle with表)
- AJAX请求区分$_SERVER['HTTP_X_REQUESTED_WITH']小解