不废话直接上代码
import {Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {Subject, Subscription} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
@Directive({
selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
@Input() debounceTime = 500;
@Output() debounceClick = new EventEmitter();
private clicks = new Subject<any>();
private subscription: Subscription;
constructor() { }
ngOnInit() {
this.subscription = this.clicks
.pipe(debounceTime(this.debounceTime))
.subscribe(e => this.debounceClick.emit(e));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
@HostListener('click', ['$event'])
clickEvent(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
this.clicks.next(event);
}
}
使用方式
在模板标签中添加 appDebounceClick 属性,默认500毫秒间隔,依据输入属性可自定义间隔时间,方式如下
<button
type="submit"
appDebounceClick
(debounceClick)="confirmAddUser(registerData)"
[debounceTime]="300"
>
确认
</button>