Question

我创建了一个显示进度条列表的网站，每个进度条显示一些后端作业的进度。

像这样：

<div ng-repeat="job in jobs">
  <div id="progressbar">...</div>
</div>

我有一个$资源用于作业列表，我有一个角度控制器轮询该资源每N秒更改一次。每当我轮询时，就会更新作业列表，因此前端的进度条列表会闪烁。后端的作业列表如下所示：

[
  {"name": "job1", "completion": 0.6},
  {"name": "job2", "completion": 0.7}
]

角度是否有一些技巧来防止闪烁，或者我必须以不同的方式做这件事吗？我想更新完成百分比，但也要使用已在后端启动的新作业更新列表。

Answer 1

您不需要使用Angular进行任何轮询。如果您的进度条指令基于job.completion的值呈现值/样式，那么它将在您更新对象时自行更新。

您的闪烁可能是您在Angular正常的$摘要周期之上进行投票的结果。

如果你是在基于其他地方的异步调用的摘要之外进行的，那么你可以使用下划线的_.throttle()函数来确保它们每x毫秒只被调用一次。

然而，简单地更新进度条不应该太费力 - 特别是如果你通过CSS而不是JS动画。

如果你可以分享你的指令中的CSS和相关代码，这可能有助于缩小它的范围。