一直以为   pipe(debounceTime(1000), distinctUntilChanged())  不起作用

原因:使用方法错误

<input type="text" [(ngModel)]='globalSearchWord' placeholder="请输入搜索关键词" (keyup)='globalSearch()'>
 globalSearch(v) {
this.showErrBox = false; this.indexService.globalSearch(this.globalSearchWord).pipe(debounceTime(1000), distinctUntilChanged()).subscribe(data => {
if (data.code == '0001') {
this.options = data.data;
} else {
let that = this;
// setTimeout(function () {
// that.showErrBox = false;
// }, 2000)
this.options = [];
}
})
}

经查询资料后发现正确的使用方法 :以下二种:

方法一:

 <input type="text" [formControl]="word">
 this.word = new FormControl('');
this.word.valueChanges
.pipe(
debounceTime(500),
distinctUntilChanged()
).subscribe(val => {
this.showErrBox = false;
this.indexService.globalSearch(val).subscribe(data => {
if (data.code == '0001') {
this.options = data.data;
} else {
let that = this;
this.options = ["暂无匹配数据"];
}
})
})

方法二:

 <input #questionInput placeholder="请输入搜索关键词" nz-input [(ngModel)]="globalSearchWord">
 this.input$ = fromEvent(this.questionInput.nativeElement, 'input')
.pipe(
debounceTime(500),
distinctUntilChanged()
).subscribe(val => {
this.showErrBox = false;
this.indexService.globalSearch(this.globalSearchWord).subscribe(data => {
if (data.code == '0001') {
this.options = data.data;
} else {
let that = this;
this.options = ["暂无匹配数据"];
}
})
})

angular6 input节流的更多相关文章

  1. 使用rxjs以及javascript解决前端的防抖和节流

    JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...

  2. React 实现input输入框的防抖和节流

    1.为什么使用防抖和节流对于频繁触发的事件 比如keydown keyup事件 当频繁点击时候 会多次触发事件 页面出现卡顿 影响性能 2.函数防抖(debounce):间隔时间内只执行一次   函数 ...

  3. 谈谈JS中的函数节流

    好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...

  4. (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)

     JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)         函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过 ...

  5. EPANET中读取INPUT文件的函数文件——INPUT3.C

    /* ********************************************************************** INPUT3.C -- Input data par ...

  6. JS 节流

    作为前端的小白,在做项目的过程中,一般只考虑到实现功能,并没有考虑到性能的问题. 比如说,下拉加载更多的这个功能和resize()是特别耗费性能的.此时就要想到节流了. 节流:就是然一个函数无法在短时 ...

  7. JS中的函数节流

    函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU时间.连续尝试进行过多的DOM 相关操作可能会导致浏览器 ...

  8. 浅析 JavaScript 的函数节流和去抖

    现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等.他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可 ...

  9. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

随机推荐

  1. docker tmpfs 的测试结果

    创建 2G 内存的 Container 使用tmpfs挂载到 /tmp docker run --rm -it --memory 2g --mount type=tmpfs,destination=/ ...

  2. 通过Charles获取看书神器API

    Charles Charles是一个可以做HTTP代理/ HTTP监视器/反向代理的软件,使开发人员能够查看其机器和Internet之间的所有HTTP和SSL / HTTPS流量.包括请求,响应和HT ...

  3. Linux 链路聚合

    Linux 链路聚合 链路聚合与双网卡绑定几乎相同,可以实现多网卡绑定主从荣誉,负载均衡,提高网络访问流量.但链路聚合与双网卡绑定技术(bond)不同点就在于,双网卡绑定只能使用两个网卡绑定,而链路聚 ...

  4. Bugku-CTF之welcome to bugkuctf(php://filter和php://input的妙用)

    Day24 welcome to bugkuctf http://123.206.87.240:8006/test1/ 本题要点:代码审计,PHP://filter ,  php://input ,  ...

  5. md5 collision(md5碰撞)之记录一些MD5值

    md5 collision之记录一些MD5值   “Magic Hash”的PHP漏洞可以使得攻击者非法获取用户的账号信息.   漏洞原因: PHP以一种特定的方式处理被哈希的字符串,攻击者可以利用其 ...

  6. [系统相关]WPS Office 2016 专业增强版 10.8.0.6470 免序列号无限制

    WPS Office (10.8.0.6470)  新增功能列表 ============================================= 改进功能列表 ------------ W ...

  7. BZOJ1688|二进制枚举子集| 状态压缩DP

    Disease Manangement 疾病管理 Description Alas! A set of D (1 <= D <= 15) diseases (numbered 1..D) ...

  8. 20175312 2018-2019-2 实验一《Java开发环境的熟悉》实验报告

    20175312 2018-2019-2 实验一<Java开发环境的熟悉>实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试J ...

  9. 【搬运工】mysql用户权限设置

    关于mysql的用户管理,笔记 1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost id ...

  10. 区别samtools faid产生的.fai文件功能和bwa index 产生的四个文件的功能

    samtools faidx 能够对fasta 序列建立一个后缀为.fai 的文件,根据这个.fai 文件和原始的fastsa文件, 能够快速的提取任意区域的序列 用法: samtools faidx ...