Настраиваемый интервал опроса с угловой и rxjs - PullRequest
Новая
       26

Настраиваемый интервал опроса с угловой и rxjs

1 голос
/ 19 апреля 2019

Я пытаюсь создать непрерывный опрос, используя rxjs и angular.Ниже приведена реализация моего требования.

https://stackblitz.com/edit/angular-sq3ke5

ngOnInit() {
    const bitcoin$ = this.http.get('https://blockchain.info/ticker');


    this.polledBitcoin$ = timer(0, this.timeInterval).pipe(
        merge(this.manualRefresh),
        concatMap(_ => bitcoin$),
        map((response: {EUR: {last: number}}) => {
          console.log(new Date() +" >> " + response.EUR.last)
          return response.EUR.last;
          }),
      );
  }

Однако в этом примере я добавил интервал опроса и хочу, чтобы он обновлялся на основе значения, введенного пользователем,Однако любые изменения в вводе текста не отражаются в интервале опроса.Может ли кто-нибудь помочь мне достичь этого результата?

Заранее спасибо.

1 Ответ

2 голосов
/ 19 апреля 2019

Обновление переменной timeInterval не просто обновит вашу interval наблюдаемую, вам придется убить ее и запустить новую наблюдаемую.

Попробуйте этот подход: 

<input [ngModel]="timeInterval" (ngModelChange)="changeInterval($event)" />
Bitcoin price: {{ dataToShow }}


ngOnInit() {
  this.startInterval();
}

startInterval() {
  const bitcoin$ = this.http.get('https://blockchain.info/ticker');
  this.polledBitcoin$ = timer(0, this.timeInterval).pipe(
      merge(this.manualRefresh),
      concatMap(_ => bitcoin$),
      map((response: {EUR: {last: number}}) => {
        console.log(new Date() +" >> " + response.EUR.last)
        return response.EUR.last;
        }),
    );

    this.sub = this.polledBitcoin$.subscribe((data) => {
      this.dataToShow = data;
    });
}

changeInterval(e) {
  this.timeInterval = e;
  if (this.sub) {
    this.sub.unsubscribe();
  }
  this.startInterval();
}

https://stackblitz.com/edit/angular-4n29cm?file=app%2Fapp.component.ts

Редактировать

Более эффективный подход состоял бы в том, чтобы дождаться изменения входа и затем заново создать интервал. Я использовал тему для прослушивания изменений во входных данных, подождите некоторое время, чтобы пользователь закончил печатать, а затем перезапустите интервал. 

ngOnInit() {
  this.startInterval();
  this.inputSub = this.inputSubject.pipe(debounceTime(500)).subscribe(() => {
    console.log('restart now')
    if (this.intervalSub) {
        this.intervalSub.unsubscribe();
    }
    // you probably don't want an interval running in zero second interval
    // add more checks here if you want, for example: this.timeInterval > 200
    if (this.timeInterval) {
      this.startInterval();
    }
  })
}

startInterval() {
  const bitcoin$ = this.http.get('https://blockchain.info/ticker');
  this.polledBitcoin$ = timer(0, this.timeInterval).pipe(
      merge(this.manualRefresh),
      concatMap(_ => bitcoin$),
      map((response: {EUR: {last: number}}) => {
        console.log(new Date() +" >> " + response.EUR.last)
        return response.EUR.last;
        }),
    );

    this.intervalSub = this.polledBitcoin$.subscribe((data) => {
      this.dataToShow = data;
    });
}

changeInterval(e) {
  console.log("change interval called");
  this.timeInterval = e;
  this.inputSubject.next(e);
}

https://stackblitz.com/edit/angular-c355ij?file=app%2Fapp.component.ts

...