Question

对于2秒内点击一次按钮，我该怎么办？ Rxjs有很多运算符，比如throttleTime.But语法是：

Rx.Observable.fromEvent(button, 'click')
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

我使用angular和Rxjs.语法是：

 // html
<button (click) = "clickMe()">

// ts
clickMe(){
 alert('yes!!!');
}

Answer 1

这里合适的操作员可能是

debounceTime(2000)

当发生多次点击时，如果出现中断（在这种情况下为2秒），则会激活最后一次点击。这是您所描述的用例中的所需行为。

throttleTime()只是暂停指定时间段内的点击次数。

Answer 2

以角度方式，button装饰者获取@ViewChild引用。在ngAfterViewInit生命周期钩子中：

@ViewChild('btn', { read: ElementRef }) button: ElementRef;

ngAfterViewInit() {

   ...

    Observable.fromEvent(this.button.nativeElement, 'click')
      .throttleTime(2000) // change from one second to two
      .scan(count => count + 1, 0)
      .subscribe(count => console.log(`Clicked ${count} times`));
}

<强>模板：

<button #btn>Hello</button>

throttleTime docs.

StackBlitz Demo

如何在2s内使用rxjs限制点击按钮一次？

2 个答案: