множественный таймер в таблице, представляющий оставшееся время до истечения, Angular 7

Question

У меня есть таблица с несколькими строками.Необходимо отобразить таймер, который будет показывать оставшееся время в n дней, x часов, y минут и z секунд.

Я могу рассчитать оставшееся время, используя

REF Link.

и я вызываю ту же функцию в столбце, используя {{myXYZFunction ()}}

вычисляя дату и время, как и ожидалось

, но я думаю, что функцияВызов запаздывает,

через 2 секунды обновляется много временных секунд, и он не показывает плавный переход в течение нескольких секунд, например, 1,2,3,4 ... 60 Это немного похоже на 1,2,4,6,8,10,12,13,14,15,17 ... 60

Answer 1

Производительность, как правило, вы хотите избегать непосредственного вызова функций, так как это называется каждый цикл обнаружения изменений. Performace tips

Гораздо лучший подход - обновить переменную-член до значений, которые вы хотите отобразить.Например:

@Component({
  selector: 'app-component',
  template: '
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Time left</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="time in times">
          <td>{{time.date}}</td>
          <td>{{time.counter | async}}</td>
        </tr>
      </tbody>
    </table>
  '
})
export class MyComponent {
  public times;

  constructor() {
    // Creates an observable that is triggers every second.
    // Observable.interval(1000).subscribe(_ => this.time = myXYZFunction());
  }

  setupTimes() {
    const rawTimes = this.getTimes(); 
    this.times = [];
    rawTimes.forEach(tm => this.times.push({date: tm, counter: this.setupCounter(tm)});
  }

  setupCounter(time) {
    return Observable.interval(1000).pipe(map(_ => myXYZFunction(time)));
  }

  /**
  * Collect all the dates that should be displayed from the backend or use a  static array.
  */
  getTimes(): number[]{
    return [];
  }
}

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

РЕДАКТИРОВАТЬ

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

setupCounter(time) { // Updated every minute.
  return Observable.interval(60000).pipe(map(_ => myXYZFunction(time)));
}