rxjs debounceTime减少搜索的频率
debounceTime用来降低事件的触发频率 ,接收以毫秒为单位的参数
它所做的操作是,在一定时间范围内不管产生了多少事件,它只放第一个过去,剩下的都将舍弃
html:
<div class="autocomplete">
<input class="input" type="search" id="search" autocomplete="off" placeholder="autocomplete">
<ul id="suggest-list" class="suggest"></ul>
</div>
js代码:
getSuggestList 是一个发送 ajax 请求的方法,返回 promise,我们使用 from 来将其转化为 Observable。
为了优化请求,首先 e.target.value 是空字符串时不应该发送请求,
然后可以使用 debounceTime 减少触发频率,也可以使用 distinctUntilChanged 操作符来表示只有与上次不同时才去发送请求。
我们还可以在 API 失败时重试 3 次。
import { fromEvent } from 'rxjs';
import { debounceTime,map,distinctUntilChanged,switchMap} from 'rxjs/operators'; // merge const input = document.querySelector('#search');
const suggestList = document.querySelector('#suggest-list');
const input$ = fromEvent(input, 'input');
input$.pipe(
filter(e => e.target.value.length > 1),
debounceTime(300),
distinctUntilChanged(),
switchMap(
e => from(getSuggestList(e.target.value)).pipe(retry(3))
)
).subscribe((val)=>console.log(val)) function getSuggestList(val){
return new Promise(function(resolve, reject){
//异步操作
setTimeout(()=>{
resolve([
{
name:'张三1',
age:21
},{
name:'张三2',
age:22
},{
name:'张三3',
age:23
},{
name:'张三4',
age:24
},{
name:'张三5',
age:25
}
]);
},2000)
});
}
rxjs debounceTime减少搜索的频率的更多相关文章
- Angular使用总结 --- 搜索场景中使用rxjs的操作符
在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的.节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装.rxjs提供了各种操作 ...
- Android FM模块学习之二 FM搜索频率流程
上一篇大概分析了一下FM启动流程,若不了解Fm启动流程的,能够去打开前面的链接先了解FM启动流程,接下来我们简单分析一下FM的搜索频率流程. 在了解源代码之前.我们先看一下流程图: 事实上从图中能够看 ...
- RxJS v6 学习指南
为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...
- Beam Search(集束搜索/束搜索)
找遍百度也没有找到关于Beam Search的详细解释,只有一些比较泛泛的讲解,于是有了这篇博文. 首先给出wiki地址:http://en.wikipedia.org/wiki/Beam_searc ...
- 基于SolrCloud的内容搜索和热点推送
➠更多技术干货请戳:听云博客 什么是热点 我认为热点有时效性和受众面 用户关注从低到高再到低的内容 .有公共热点和分类热点.例如医辽养老全民关注,科技汽车等只有特定的人群关注. 推送的条件 搜索频次达 ...
- vue自动完成搜索功能的数据请求处理
在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...
- linux命令:文件搜索命令
---恢复内容开始--- 文件搜索命令:which 命令名称:which 命令所在路径:/usr/bin/which 执行权限:所有用户 语法:which [命令名称] 功能描述:显示系统命令所在目 ...
- 洛谷P1074 靶形数独 [搜索]
题目传送门 题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教, Z 博士拿出了 ...
- 阿里云 如何减少备份使用量? mysql数据库的完整备份、差异备份、增量备份
RDS for MySQL备份.SQL审计容量相关问题_MYSQL使用_技术运维问题_云数据库 RDS 版-阿里云 https://help.aliyun.com/knowledge_detail/4 ...
随机推荐
- 让iOS 开发更便捷-JSONConverter
JSONConverter是MAC上iOS开发的辅助小工具,可以快速的把json数据转换生成对应的模型类属性,目前支持Objective-C.Swift以及目前流行的第三方库: SwiftyJSON. ...
- render()--组件--纯函数
render() 当 被调用时,它会检查 和 的变化并返回以下类型之一: React 元素.通常通过 JSX 创建.例如,<div /> 会被 React 渲染为 DOM 节点,<M ...
- 异步编程实现技术:回调、promise、协程序?
异步编程实现技术:回调.promise.协程序?
- POJ2139-Six Degrees of Cowvin Bacon-(Floyd_Warshall)
题意:有n只牛拍电影m部电影,知道每部电影有哪些牛参与,一起拍电影的牛之间维度为1,ab拍电影则ab之间的维度为1,如果bc一起拍电影,ac没有一起,则ac之间的维度为2,以此类推.求哪知牛到所有牛之 ...
- jmeter压力测试中的疑难杂症
概述 大部分新手在用jmeter做压力测试的时候,对一些性能术语十分模糊,直接导致的后果就是对测试出来的结果数据根本不能理解,更谈不上分析了.今天的文章就着重给大家解释一下压力测试中的一些专有名词 问 ...
- sql注入用<>绕过被过滤的select ——百度杯9月第二场SQL
题目提示SQL注入,打开源代码发现<!--SELECT * FROM info WHERE id=1--> 尝试union select 1,2,3提示inj code! 经过多次尝试之后 ...
- mysql将多条结果拼接成一条结果
1,实际数据 SELECT resource_id, resource_type FROM res_resource_mount 2,拼接之后数据 SELECT c.resource_id, GROU ...
- 【转】linux sed命令
转自:linux sed命令就是这么简单 参考:Linux三大剑客之sed:https://blog.csdn.net/solaraceboy/article/details/79272344 阅读目 ...
- patchUpload.vue?5e29:406 Uncaught (in promise) DOMException: Failed to execute 'readAsArrayBuffer' on 'FileReader': The object is already busy reading Blobs.
patchUpload.vue?5e29:406 Uncaught (in promise) DOMException: Failed to execute 'readAsArrayBuffer' o ...
- SearchLookupEdit 选择后联动
直接改绑定数据源--实体的属性会导致选择内容变空 所有改相应控件的text然后再写入数据源 最好将需要联动的控件设置成只读 mNoTextEdit.EditValueChanged += (s, e) ...