angular中的input防抖使用_angular 防抖

一周复盘。学而时习之。。。
复习一下节流与防抖，关于二者的概念，网上各种说辞。

防抖：在高频触发回调函数时，防抖操作使回调函数在一定时间间隔内，再次触发会清空定时器，并重新计时；计时结束后输出一次结果。

核心在于，在短时间内大量触发同一事件时，只会执行一次回调函数。避免把一次事件误认为多次。
场景：在表单校验的时候，不加防抖，依次输入name，就会分成n，na，nam,name四次发出请求；而添加防抖，设置好时间，可以实现完整输入name才发出校验请求

节流：在高频触发回调函数时，节流操作使回调函数在每隔一段时间定期执行一次，时间间隔内再触发，不会重新执行。

核心在于让一个函数不要执行的太频繁，减少一些过快的操作。

// 监听页面滚动条位置
const handleScrollTop = () => {
   const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　 console.log('滚动条位置：' + scrollTop);
}

// 防抖：在停止滚动100ms后，才会输出滚动条位置
window.onscroll = debounce(handleScrollTop,100)

// 节流：每隔100ms都会输出一次滚动条位置
window.onscroll = throttle(showTop,100) 

1
2
3
4
5
6
7
8
9
10
11
12

常见场景

监听 scroll、mousemove 等事件 - 节流（每隔一秒计算一次位置）
监听浏览器窗口 resize 操作 - 防抖（只需计算一次）
键盘文本输入的验证 - 防抖（连续输入文字后发送请求进行验证，验证一次就好）
提交表单 - 防抖（多次点击变为一次）

节流、防抖有时用哪个都可以，比如监听页面滚动，可以节流（每个一段时间出发一次回调），也可以防抖（用户当前这次滚动结束出发，继续滚动等待下一次触发）

angular中的使用

场景：input输入框，内容改变时，去执行另外一件事情
知识点一：angular监听：ngModelChange,input 绑定的值，通过ngModelChange可以实现监听
知识点二：angular中防抖函数的使用：

 <input type="text" [(ngModel)]="item.value" (ngModelChange)="inputValueChange(false, i)">
 // ngModelChange监听value 值
1
2

import { fromEvent, Subject } from 'rxjs';
import{ debounceTime} from 'rxjs/operators'; // 引入debounceTime、Subject
1
2

private getDataTerms = new Subject<string>();
1

 inputValueChange(flag, index) {
        this.getDataTerms.next(index);
    } // 当input 的值发生改变时，执行的回调
1
2
3

 ngOnInit() {
        this.getDataTerms.pipe(debounceTime(1000)).subscribe((index) => {
            this.valueChange(index);
        }) // debounceTime函数
  }
1
2
3
4
5

补充一句：angular 的两个坑。爬出来了，觉得很容易。。。当初没爬出来时，也琢磨了好久。。。