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));
});

我遇到的问题是：每次更新单个计时器单元时，都会触发重绘。有没有办法告诉浏览器等待重绘？或者可能是将这些更新分组到单个更新中的某种方式。我还想过每次更新时都重新渲染整个tbody，但认为这可能比只更新单元格更加系统密集。

Answer 1

不要为此使用jQuery。让我们手动创建一个文档片段并将其附加到DOM，这样我们就不会重新绘制。

var curTime = new Date().getTime() / 1000;
$('.timerCell').text(function(){
    var elm = $(this).get(0);
    var frag = document.createDocumentFragment();

    elem.removeChild(elem.childNodes[0]);
    frag.appendChild(document.createTextNode(unixToHumanTime(curTime - initialTime)));
    elem.appendChild(frag);
});

Answer 2

试试这个：

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

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

单次重绘/重排中有多个DOM更新？

2 个答案: