Как предотвратить возникновение событий в Angular 9 с помощью setInterval? - PullRequest
Новая
       9

Как предотвратить возникновение событий в Angular 9 с помощью setInterval?

0 голосов
/ 25 марта 2020

В моем коде Angular 9 есть компонент navbar, где пользователь видит таймер обратного отсчета со своим временем сеанса. Он отсчитывает каждую секунду.

Мой компонент выглядит следующим образом: 

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit, OnDestroy {
  timer: any;
  countdownTimer = '';

  constructor() { }

  ngOnInit() {
    this.startTimer();
  }

  ngOnDestroy() {
    this.stopTimer();
  }

  startTimer() {
    this.timer = setInterval(() => {
      this.countdownTimer = this.milisecondsToTime(3600000);
    }, 1000);
  }

  milisecondsToTime(duration: number): string {
    const seconds = Math.floor((duration / 1000) % 60);
    const minutes = Math.floor((duration / (1000 * 60)) % 60);
    const hours = Math.floor((duration / (1000 * 60 * 60)) % 24);

    const hoursString = (hours < 10) ? '0' + hours : hours;
    const minutesString = (minutes < 10) ? '0' + minutes : minutes;
    const secondsString = (seconds < 10) ? '0' + seconds : seconds;

    return hoursString + ':' + minutesString + ':' + secondsString;
  }

  stopTimer() {
    clearTimeout(this.timer);
  }

В nav.component. html: 

      <div>
        Session: {{ countdownTimer }}
      </div>

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

Есть ли лучший способ или лучший способ показать таймер обратного отсчета и не затоплять Angular событием в каждом секунд

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

С помощью Angular 9 вы можете установить новое свойство ngZoneEventCoalescing, чтобы предотвратить появление событий. Вы должны добавить его в методе bootstrapModule.

Пример 

  platformBrowserDynamic()
  .bootstrapModule(AppModule, { ngZoneEventCoalescing: true })
  .catch(err => console.error(err));

Подробнее об этом можно прочитать здесь

0 голосов
/ 25 марта 2020

Я использую ваш код выше, он не запускает обратный отсчет, я не уверен, что означает значение 3600000, я предполагаю, может быть, продолжительность обратного отсчета, может быть? Я создал пример, не уверенный, что это решение, которое вы ищете.

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

...