angular6 input节流
一直以为 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节流的更多相关文章
- 使用rxjs以及javascript解决前端的防抖和节流
JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...
- React 实现input输入框的防抖和节流
1.为什么使用防抖和节流对于频繁触发的事件 比如keydown keyup事件 当频繁点击时候 会多次触发事件 页面出现卡顿 影响性能 2.函数防抖(debounce):间隔时间内只执行一次 函数 ...
- 谈谈JS中的函数节流
好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...
- (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)
JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce) 函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过 ...
- EPANET中读取INPUT文件的函数文件——INPUT3.C
/* ********************************************************************** INPUT3.C -- Input data par ...
- JS 节流
作为前端的小白,在做项目的过程中,一般只考虑到实现功能,并没有考虑到性能的问题. 比如说,下拉加载更多的这个功能和resize()是特别耗费性能的.此时就要想到节流了. 节流:就是然一个函数无法在短时 ...
- JS中的函数节流
函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU时间.连续尝试进行过多的DOM 相关操作可能会导致浏览器 ...
- 浅析 JavaScript 的函数节流和去抖
现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等.他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
随机推荐
- java 执行https的请求
普通的get和post请求只能执行http的请求,遇到的了https的就歇菜了,需要SSL安全证书处理. 该方法只能用jdk1.7和1.8进行处理,jdk1.6会报Could not generate ...
- SSRS分页
1:首先进行分组,分组表达式为CEILING(RowNumber(Nothing)/50) 注:50是一页放50条数据,一页想放多少条,就改成多少 2:在Group Prope ...
- 第三方jar包上传私服和项目使用
下面只做个人日志记录,勿喜勿喷 使用两个浏览器,带着下面的问题去看:https://www.cnblogs.com/tyhj-zxp/p/7605879.html.就会清晰了 1.下载和安装nexus ...
- MTK 使用iptable 命令来完成网络路由(android WIFI/4G分享网络)
很多时候,总有些奇怪的需求,这时候是发挥我们的聪明才智的时候!! 有客户的需求是: 公网 WIFI 4G/其他网络 以太网1 以太网2 内部设备 描述下需求:现今有一个控制设备,里面有WIFI,物联网 ...
- 重写用户模型时报错AttributeError: type object ‘自定义类’ has no attribute ‘USERNAME_FIELD’
view中导入:from django.contrib.auth.models import AbstractBaseUser settings.py中设置了:AUTH_USER_MODEL='app ...
- Linux 运维之路
第一章:Linux必备知识 1.Linux 系统介绍 2.Linux 简单文本处理 3.Linux 组管理.权限 4.Linux vim文档操作 5.Linux 高级文件管理 6.Linux 文件 ...
- 关于Java多线程的一些常考知识点
前言 Java多线程也是面试中经常会提起到的一个点.面试官会问:实现多线程的两种方式以及区别,死锁发生的4个条件以及如何避免发生死锁,死锁和活锁的区别,常见的线程池以及区别,怎么理解有界队列与无界队列 ...
- websocket --- 05 . http与websocket
一.http协议 1.基于 TCP 协议 2.一次请求 一次响应 断开 3.客户端永远处于主动状态 4.服务器永远处于被动状态 5.Http无状态 - 在服务器不保存客户端的信息 6.服务器无法主动找 ...
- (void) (&_min1 == &_min2);【转】
本文转载自:https://blog.csdn.net/xiaofeng_yan/article/details/5248693 偶然在<./linux/include/linux/kernel ...
- blogger添加代码高亮
blogger(blogspot)自带的是没有代码高亮的,我们可以用下面的方法添加代码高亮. 首先我们打开blogger(blogspot)后台,然后点击主题背景-->修改html,然后在弹出的 ...