我正在开发一个 firebase 在线考试应用。在游戏中，我有 10 秒后完成的进度条，用户应该完成答案。我已使用此间隔函数为 10 秒设置动画。
.ts
startGame() {
interval(10)
.pipe(take(1000))
.subscribe((res) => {
this.progressTimer += 0.1;
})
);
}
.html
<mat-progress-bar mode="determinate" [value]="progressTimer"></mat-progress-bar>
但是我注意到当标签不活动时，进度条非常不稳定或非常慢。我不希望用户切换选项卡并寻找答案并返回应用程序并继续。您如何处理此类案件？
【问题讨论】：
如果您检查here，您会看到 chrome 的背景选项卡的最小计时器间隔为 1000 毫秒，这意味着您的 10 毫秒回调不会被触发。您可以将间隔增加到 1000 毫秒，并覆盖动画以使其平滑：
ts：
readonly progress$ = interval(1000).pipe(
take(10),
map((i) => (i + 1) * 10),
startWith(0)
);
模板：
<mat-progress-bar mode="determinate" [value]="progress$ | async"></mat-progress-bar>
css 覆盖：
.mat-progress-bar .mat-progress-bar-fill {
transition: transform 1000ms linear !important;
}
如果您正在寻找精确度，Date.now() 也不会提供此功能，因为在回答过程中通过更改系统时间很容易伪造。
你说你使用firebase，如果你使用firestore数据库，你可以使用firebase.firestore.Timestamp.now()方法获取当前服务器时间戳。但是，这很可能会出现短暂的网络延迟，并且您的代码显然看起来有点不同
【讨论】：
间隔和超时不准确。他们只在指定时间后被授予调用方法。据此，当Tab无效时，进度可能会慢。我建议使用时间戳差异。
startGame() {
const gameStartTimestamp = Date.now();
const gameEndTimestamp = gameStartTimestamp + 10000
interval(100)
.pipe(
map(() => Date.now()),
takeWhile(date => date < gameEndTimestamp)
)
.subscribe(date => {
this.progressTimer = Math.round((now - this.gameStartTimestamp) / 100)
})
);
我还分叉了 Poul 的演示并在那里应用我的更改 demo
【讨论】：
你能不能把你的函数改成这个函数。 如果您可以轻松地玩，请不要玩硬的方式。
timer;
startGame() {
this.timer = setInterval(() => {
this.progressTimer = this.progressTimer + 10;
if (this.progressTimer >= 100) {
clearInterval(this.timer);
}
}, 1000);
}
【讨论】：