Несколько обновлений DOM за одну перерисовку / перекомпоновку?

Question

У меня есть таблица, которая заполняется списком подключенных пользователей.Сам список меняется не очень часто, но одна вещь в каждой строке - это таймер (чч: мм: сс), который обновляется каждую секунду.Чтобы обновить таймеры, я делаю что-то вроде этого:

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

Не используйте для этого 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 с по одному, но делает это более эффективно.