Как использовать кнопку ограничения rxjs один раз в 2 с？

Question

Для нажатия кнопки один раз в 2 секунды, что мне делать? Rxjs имеет много операторов, таких как throttleTime. Но грамматика:

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

Я использую угловой и Rxj. Грамматика:

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

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

Answer 1

Угловым способом получите 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

Answer 2

Подходящий оператор здесь может быть

debounceTime(2000)

Когда происходит несколько щелчков, если наступает перерыв (в данном случае 2 с), то будет активирован последний щелчок. Это желаемое поведение в случаях использования, подобных тому, который вы описали.

throttleTime() просто приостанавливает клики на указанное количество времени.