茅台和节流防抖

1. 从单词说起

节流(throttleTime)(扼住时间的脖子=节流)
茅台和节流防抖_第1张图片
防抖 (debounceTime)
茅台和节流防抖_第2张图片

2. 正片开始

2.1 类比说明

节流:比如今天的9点-10点抢茅台,预计5000个人报名抢茅台,但是9点30分的时候,又进来了4000人报名一块抢茅台。但是无论增加到多少人,最后只在 10点 的时候抽取1个人做今天的幸运儿。
这波结束以后,在10点-11点下一波抢购中,又从0人开始报名,和上一波类似,在这1h内无论多少人报名,最后只在11点的时候抽取一个人

节流又比如:
① 万人过独木桥的考试,1000人报考录入1人
② 一家公司一个月来了20个面试者,最后只能录取一个人

防抖:比如今天的9点-10点抢茅台,预计5000个人报名抢茅台,但是9点30分的时候,又进来了4000人报名一块抢茅台。此时官方把抢购时间变成了9点30分-10点30分。,但是9点50分的时候,又进来了1000人报名一块抢茅台。此时官方把抢购时间变成了9点50分-10点50分。最后只在10点50分的时候抽取1个人做今天的幸运儿。

防抖又比如:
① 戒烟,给自己的戒烟目标是30天内不抽烟,就去删库。坚持了1天后,放弃了,这30天又要重新开始计算。如此循环,30天实际可能变成了365天或3650天或36500天 (每次中断30天计算的吸烟就是抖动)
② 周期性立flag,却又经常不实现
③ 手动填写某些纸质资料的时候,因为某一项写错了,就要重新写
④ 摇号的社保年限问题,如果社保断交了,就要重新开始计算社保缴纳年限


节流,节流,节的是时间间隔的流。(可以联想水龙头水的粗细, 时间间隔长=水流粗,时间间隔短=水流细。)
(节流对应的情况是:一段时间内多次改变值的情况, 解决的是 频繁 的问题 )
节流的各周期直接互不影响

防抖,防抖,如果一段时间内抖动了,就重新防。一段时间内没有抖动,才会触发后续函数
(防抖对应的情况是:一段时间内不改变值的问题, 解决的是 积累 的问题, 不改变值=积累空值)
防抖的当前周期可能影响下一周期

2.2 show code

2.2.1 节流

茅台和节流防抖_第3张图片

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { debounceTime, throttleTime } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() { }
  aa: any;
  bb: any;

  ngOnInit() {
    this.aa = new Observable(oberser => {
      this.bb = oberser;
    });
    this.aa.pipe(throttleTime(2000)).subscribe((res: any) => {
      console.log('3');
      // 1649573823646 (1649573823646 - 1649573823641 = 5)
      // 距离早上吃啥过去了0秒
      // 1649573826653 (1649573826653 - 1649573823641 = 3012)
      // 距离早上吃啥过去了0秒
      console.log(new Date().getTime());
      console.log(res);
    });

    console.log('首次加载');
    // 1649573823641
    console.log(new Date().getTime()); 
    this.bb.next('早上吃啥');

    setTimeout(() => {
      console.log('1');
      // 1649573824648  (1649573824648 - 1649573823641 = 1007)
      // 距离早上吃啥过去了1秒
      console.log(new Date().getTime()); 
      this.bb.next('中午吃啥');
    }, 1000);

    setTimeout(() => {
      console.log('2');
      // 1649573826649  (1649573826649 - 1649573823641 = 3008)
      // 距离早上吃啥过去了3秒
      console.log(new Date().getTime());
      this.bb.next('晚上吃啥');
    }, 3000);
  }
}

2.2.2 防抖

茅台和节流防抖_第4张图片
为什么最后变成了5s,因为在第3秒的时候又发生了变化,所以重新防抖2s

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { debounceTime, throttleTime } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() { }
  aa: any;
  bb: any;

  ngOnInit() {
    this.aa = new Observable(oberser => {
      this.bb = oberser;
    });
    this.aa.pipe(debounceTime(2000)).subscribe((res: any) => {
      console.log('3');
      // 1649572216375 (1649572216375 - 1649572211345 = 5030)
      // 距离早上吃啥过去了5秒
      console.log(new Date().getTime());
      console.log(res);
    });

    console.log('首次加载');
    // 1649572211345
    console.log(new Date().getTime()); 
    this.bb.next('早上吃啥');

    setTimeout(() => {
      console.log('1');
      // 1649572212348  (1649572212348 - 1649572211345 = 1003)
      // 距离早上吃啥过去了1秒
      console.log(new Date().getTime()); 
      this.bb.next('中午吃啥');
    }, 1000);

    setTimeout(() => {
      console.log('2');
      // 1649572214373  (1649572214373 - 1649572211345 = 3028)
      // 距离早上吃啥过去了3秒
      console.log(new Date().getTime());
      this.bb.next('晚上吃啥');
    }, 3000);
  }
}

又比如希望防抖2s,但是在1s的时候抖动了,所以在1s的基础上又重新防抖2s,所以最后变成了3s(1+2=3)

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { debounceTime, throttleTime } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() { }
  aa: any;
  bb: any;

  ngOnInit() {
    this.aa = new Observable(oberser => {
      this.bb = oberser;
    });
    this.aa.pipe(debounceTime(2000)).subscribe((res: any) => {
      console.log('3');
      // 距离早上吃啥过去了3秒
      console.log(new Date().getTime());
      console.log(res);
    });

    console.log('首次加载');
    console.log(new Date().getTime()); 
    this.bb.next('早上吃啥');

    setTimeout(() => {
      console.log('1');
      // 距离早上吃啥过去了1秒
      console.log(new Date().getTime()); 
      this.bb.next('中午吃啥');
    }, 1000);
  }
}

3. 辅助资料

图片来源
茅台和节流防抖_第5张图片
茅台和节流防抖_第6张图片
图片来源
茅台和节流防抖_第7张图片
图片来源
茅台和节流防抖_第8张图片
茅台和节流防抖_第9张图片
茅台和节流防抖_第10张图片
茅台和节流防抖_第11张图片
图片来源
茅台和节流防抖_第12张图片
茅台和节流防抖_第13张图片
茅台和节流防抖_第14张图片

你可能感兴趣的:(angular,angular,前端)