在一次重绘/重排中进行多个DOM更新？

Question

我有一个表，其中包含连接的用户列表。列表本身并不经常更改，但是每行的一件事是一个计时器（hh：mm：ss），该计时器每秒更新一次。要更新计时器，我正在执行以下操作：

var curTime = new Date().getTime() / 1000;
$('.timerCell').each(function(){
    var $this = $(this);
    var initialTime = $this.data('sessionStartTimestamp'); // .data gets when the cell is dynamically created based on data received in an ajax request.
    $this.text(unixToHumanTime(curTime - initialTime));
});

我遇到的问题是：每次更新单个计时器单元时，都会触发重绘。有没有办法告诉浏览器等待重绘？或以某种方式将这些更新分组为单个更新。我还曾考虑过每次更新时都会重新渲染整个躯干，但我认为这可能比仅更新单元更耗费系统资源。

Answer 1

尝试这个：

var curTime = new Date().getTime() / 1000;
$('.timerCell').text(function(){
    var initialTime = $(this).data('sessionStartTimestamp'); 
    return unixToHumanTime(curTime - initialTime);
});

许多 jQuery 方法允许您传递带有返回值的回调函数。严格来说，这段代码仍然一次更新 .timerCell一个，但它的效率更高。