前端页面控制按钮事件触发频率

TS项目中，有时在前端页面需要控制按钮事件触发的频率，比如表单的提交按钮，避免其在极短时间内多次被触发。

基于这种情况，记录一下使用 Rxjs 的方法控制按钮事件触发频率。

import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';


/**
 * 控制点击事件触发频率
 * @param dom DOM元素或其id
 * @param time click事件触发频率
 * @Description 用于控制按钮在time时间内只触发一次实际操作
 * @Usage  只需要在页面初始化的时候调用该方法：throttleClick('DOM_id').subscribe(() => { /* 按钮触发方法  */});
 */
export function throttleClick(dom: string | HTMLElement, time: number = 3000): Observable<any> {
  if (typeof dom === 'string') {
    dom = document.getElementById(dom);
  }
  return fromEvent(dom, 'click').pipe(throttleTime(time));
}

参考链接：

• fromEvent(): 根据给定事件对象的指定类型事件创建一个 Observable 。

• throttleTime(): 从源 Observable 中发出一个值，然后在指定毫秒内忽略随后发出的值，然后重复此过程。

---

其它方法：

• 自行实现JS防抖与节流方法

---