RxJS 核心概念一小时入门RxJS中文教学放心适用讲解非常棒按钮组buttonnz-buttonnzTypeprimarystylecursor:pointer!important;margin-bottom:4px;(click)throttleClick(flag1, 2000, btnFunc1)btn1/buttonbuttonnz-buttonnzTypeprimarystylecursor:pointer!important;margin-bottom:4px;(click)throttleClick(flag2, 2000, btnFunc2)btn2/button引用 rxjs import{Subject,forkJoin,Observable,of}fromrxjs;// 引入 forkJoinimport{throttleTime,takeUntil,catchError,tap,map}fromrxjs/operators;按钮触发事件// 点击 btn1 按钮触发的事件btnFunc1():Observableany{}// 点击 btn2 按钮触发的事件btnFunc1():Observableany{}设置节流takeUntil函数签名:takeUntil(notifier: Observable): Observable发出值直到提供的 observable 发出值它便完成。throttleTime函数签名:throttleTime(duration: number, scheduler: Scheduler): Observable当指定的持续时间经过后发出最新值。call()是函数的原生方法作用是立即执行该函数并强制绑定函数内部的this指向第一个参数后续参数作为函数的入参传入。bind()是 JavaScript 函数的原生方法核心作用是创建一个新函数这个新函数被调用时其内部的this会永久绑定到 bind() 的第一个参数同时可以预先传入部分参数柯里化throttleClick(btnKey:string,delay:number,callback:()void):void{// 若该按钮未创建 Subject初始化并设置节流if(!this.buttonSubjects.has(btnKey)){constsubject$newSubjectvoid();subject$.pipe(throttleTime(delay),// 节流核心takeUntil(this.destroy$)// 组件销毁时取消订阅).subscribe(function(){callback.call(this)}.bind(this));// 执行按钮回调this.buttonSubjects.set(btnKey,subject$);}// 发送点击信号this.buttonSubjects.get(btnKey)this.buttonSubjects.get(btnKey).next();}完整 js 代码import{Subject,forkJoin,Observable,of}fromrxjs;// 引入 forkJoinimport{throttleTime,takeUntil,catchError,tap,map}fromrxjs/operators;// 存储每个按钮的 Subjectkey按钮标识value对应 SubjectprivatebuttonSubjectsnewMapstring,Subjectvoid();// 组件销毁信号privatedestroy$newSubjectvoid();throttleClick(btnKey:string,delay:number,callback:()void):void{// 若该按钮未创建 Subject初始化并设置节流if(!this.buttonSubjects.has(btnKey)){constsubject$newSubjectvoid();subject$.pipe(throttleTime(delay),// 节流核心takeUntil(this.destroy$)// 组件销毁时取消订阅).subscribe(function(){callback.call(this)}.bind(this));// 执行按钮回调this.buttonSubjects.set(btnKey,subject$);}// 发送点击信号this.buttonSubjects.get(btnKey)this.buttonSubjects.get(btnKey).next();}// 点击 btn1 按钮触发的事件btnFunc1():Observableany{}// 点击 btn2 按钮触发的事件btnFunc1():Observableany{}ngOnDestroy(){this.destroy$.next();this.destroy$.complete();// 遍历销毁所有按钮的 Subjectthis.buttonSubjects.forEach(subject$subject$.complete());this.buttonSubjects.clear();}