javascript - Optimizing recurring ui updates

Question

I just figured what's slowing down entire page.

I have a directive that updates date, based on Resig's prettyDate jquery plugin, showing in convenient format how long ago the event took place... The directive itself build around the angular's sample that they use on the documentation page here's the sample.

it works perfectly if you have a few elements on the page, but once you put more it slows down the entire page, because it's constantly updating the time, even if you put longer interval between the updates it still will update simultaneously all the elements.

Can you guys suggest any solution to that? Is it possible somehow to update them asynchronously or I know it sounds silly like in a different thread or something like that.

How do people generally solve that, how do you update thousands of elements without sacrificing performance?

.

Answer 1

你需要它每秒更新吗？每分钟怎么样？

与其让每个指令运行自己的计时器，不如创建一个 timerService。将此服务注入到每个指令中。让指令 $watch 更改服务属性（例如 currentTime），并在更改时更新其视图。

如果您不希望所有日期同时更新，您可以在 timerService 中创建一个计时器数组（并在更新数组的每个元素时交错）并让每个指令的链接函数从要观看的数组。