Angular 6计时器问题

时间:2019-01-12 23:50:11

标签: javascript angular timer rxjs

我有一个视图,该视图每30秒轮询一次端点,并在有更改时进行更新。在同一视图中,我有一个div,它每7秒显示/隐藏一次。计时器同时启动。

它运行的前几次,运行完美。直到第一个30秒钟定时器再次轮询时,它基本上才开始每2秒闪烁一次,这是不应该的。

component.ts

  getScreen(tapCode) {
    timer(0, 30000)
      .pipe(mergeMap(() => this.dataService.get_screen(tapCode)))
      .subscribe(objectResp => {
        this.callResp = objectResp.status;
        this.polledObj = objectResp.items;
        this.landing = false;
        this.loaded = true;
        this.unavailable = objectResp.items.unavailable;
        localStorage.setItem('ontapCode', tapCode);
        this.getAds(this.polledObj);
      });
  }

  getAds(polledObj) {
    this.showAd = false;
    this.adTimer = timer(0, 7000);
    this.adSubscription = this.adTimer.subscribe(() => {
      if(this.timerCount >= this.polledObj.adverts.length) {
        this.timerCount = 0;
      }
      if(this.timerCount <= this.polledObj.adverts.length) {
        this.adImage = this.polledObj.adverts[this.timerCount].filename;
        this.timerCount++;
      }
      this.showAd = !this.showAd;
    });
  }

component.html

   <div *ngIf="callResp === 'OK'" class="tap">
      <div *ngIf="unavailable === '1' || unavailable === 1" class="object-unavailable">
        <img src="./assets/unavailable.png" class="unavailable-img">
      </div>
      <div *ngIf="unavailable === '0' || unavailable === 0">
        <img src={{polledObj.img}} class="img-object">
        <div class="container">
          <div *ngIf="showAd === true">
            <div class="advertisement">
              <img src={{adImage}}" class="img-ad">
            </div>
          </div>
          <div *ngIf="showAd === false">
              <div class="object-detail-container">
                <h3 (click)="resetStorage()" class="object-name text-white">{{polledObj.object_name}}</h3>
                <h4 class="text-white object-brewery">{{polledObj.brewery}}</h4>
                <h4 class="text-white object-style">{{polledObj.style}} - {{polledObj.abv}}%</h4>
                <div class="object-sizes" *ngFor="let size of polledObj.sizes">
                  <span class="object-size-name">{{size.name}}: </span>
                  <span class="object-size-volume"> {{size.volume*1000}}ml </span>
                  <span class="object-size-price"> ${{getPrice(size.price)}} </span>
                  <span class="object-size-std"> {{getSizeStd(size)}} </span>
                  <span class="object-size-std-drinks"> std drinks</span>
                </div>
              </div>
          </div>
        </div>
        </div>

0 个答案:

没有答案