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 [];
  }
}

通过这种方式，您可以控制仅在需要调用函数时才调用它。减少不必要的负载并消除您正在观察的UI滞后。

编辑

请注意，计数器和日期将以表格形式显示，该示例已被修改。请注意，我们在日期和倒数计时器之后形成了一个对象。尽管如此，在这里要实现的目标是相当昂贵的，并且可能会滞后于一些日期。另外，我们利用了异步管道的优势，不必担心取消订阅。除非您确实必须达到第二个精度，否则我将在可能的情况下将计数器增加到每几秒钟或每分钟一次。这将大大减轻浏览器的负担。

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

表中的多个计时器，表示剩余的剩余时间，Angular 7

1 个答案: