Angular使用指令配合RXJS使用节流throttle

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 throttle
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时 debounce

之前说起节流防抖，都是在事件内部用RXJS处理的（最开始写的是原生，设定计时器和开关）。后来看到别人把节流防抖放在 Angular 指令 Directives里，并且使用@output装饰器触发元素的指定事件。

太妙了。

import { Directive, EventEmitter, HostListener, OnInit, Output, OnDestroy } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
/**
 * 点击节流器：避免连续点击
 */
@Directive({
  selector: '[directive-throttle]'
})
export class ThrottleClickDirective implements OnInit, OnDestroy {
  // 一定的时间内只执行第一个事件
  private THROTTLE_TIME: number = 500;
  private subject = new Subject<MouseEvent>();
  private click: Subscription;
  // 事件方法
  @Output() throttleClick = new EventEmitter();
 
  constructor() { }
 
  ngOnInit(): void {
    const result = this.subject.pipe(
      throttleTime(this.THROTTLE_TIME)
    );
    this.click = result.subscribe(e => {
      this.throttleClick.emit(e)
    })
 
  }
 
  ngOnDestroy() {
    this.click.unsubscribe();
  }
 
  @HostListener('click', ['$event'])
  onClick(evt: MouseEvent) {
    this.subject.next(evt);
  }
}

代码不多，但是涉及到的知识点很多。

1. RXJS subject

RxJS 核心概念之Subject_Alex__Gong的博客-CSDN博客本文出处：https://segmentfault.com/a/1190000005069851，我做了一部分修改我们在接触到RxJS的时候，不免会有点晕头转向的感觉，对于什么是Subject,什么是Observer,什么是Observable，总感觉晕乎乎的。下面我引用一篇为自认为比较通俗易懂的博文，再加上自己的描述来给大家解释下，弄明白之后对于学习Angular2+有很大的帮助，因为在https://blog.csdn.net/GongZhongNian/article/details/787387562. RXJS throttle

使用rxjs以及javascript解决前端的防抖和节流,以及防抖在vue中的用法_榴莲不好吃的博客-CSDN博客_rxjs 节流JavaScript实现方式:防抖触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；思路：每次触发事件时都取消之前的延时调用方法：举个例子:做一个自动查询的功能假装下面的代码是从服务器获取的数据(下面会用到):// 假装这是个接口function getData(val){ return new Promise(functi...https://blog.csdn.net/sllailcp/article/details/1000899823. @output + EventEmitter

Angular 父组件监听子组件事件--by EventEmitter - 简书EventEmitter的一个典型应用就是父组件监听子组件的事件。 子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件...https://www.jianshu.com/p/145a06f052064. @HostListener

https://angular.cn/api/core/HostListenerhttps://angular.cn/api/core/HostListener

思考：@Directive + @HostListener 的使用应该可以做很多有意思的的事情。之前对指令的认知仅仅是停留在校验器的使用。

或许可以开发更多的玩法？