Как создать очередь на событие с несколькими нажатиями

Question

У меня есть один вопрос относительно этой очень специфической ситуации, с которой я сейчас сталкиваюсь в Angular 4 / Typescript.У меня есть 2 кнопки (например: Увеличение: «+» и Уменьшение: «-»), на стенде есть события onClick для изменения значения текущего номера.

При каждом щелчке я делаю вызов API, чтобы обновить новое значение номера в Backend.Если пользователь нажимает несколько раз очень быстро (например, в 14 раз, чтобы увеличить с 0 до 14 менее чем за 1 секунду), я отправлю 14 вызовов API.

Я хочу сохранить увеличенный номер и отправить вызов через 300 мс после последнего вызова.Представление таблицы:

|-----------------------------------------------------------------------|
| Clicks   | 1 . 2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 10 . 11 . 12 . 13 . 14 |
|-----------------------------------------------------------------------|
| Time     | 0ms ......... 300ms .............. 600ms ............ final|
|-----------------------------------------------------------------------|
| Api call | ............ send(5) ........... send(10) ........ send(14)|
|-----------------------------------------------------------------------|

Я искал в Google об этом, но ничего не нашел.

Answer 1

Вы можете попытаться объединить debounceTime и differentUntilChanged: https://www.learnrxjs.io/operators/filtering/distinctuntilchanged.html

Пример ниже выдаст значение, только если оно отличается от последнего, опрашивая каждые 300 мс.Вы можете вызвать функцию next () на своих кнопках и выполнить вызов API внутри подписки.

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {


    value$ = new Subject<string>();

    constructor() {}   

    ngOnInit() {        
        this.value$
            .pipe(debounceTime(300))
            .pipe(distinctUntilChanged())
            .subscribe(result => {
                // call api
            });
    }
}

Answer 2

здесь - живая демонстрация на CodeSandbox , а минимальное представление кода ниже.

В целом throttleTime выдает последнее значение, когда заданная продолжительность прошла. rxjs docs

Надеюсь, это поможет вам.

import { Component } from "@angular/core";

import { throttleTime } from "rxjs/operators";

import { Subject } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dumySubject = new Subject();
  clicker = 0;
  calls = [];

  constructor() {}

  ngOnInit() {
    this.dumySubject.pipe(throttleTime(300)).subscribe(() => {
      this.calls.push(this.clicker);
    });
  }

  clickFunc() {
    this.clicker++;
    this.dumySubject.next(this.clicker);
  }
}