Отображение списка элементов на основе времени

Question

Я создал аудиопроигрыватель на своем веб-сайте.

Могут быть основанные на времени комментарии к воспроизводимым дорожкам, и я хочу, чтобы они отображались, когда ход дорожки достигает отметки времени комментария.

Моя установка ul с комментариями li с.li s скрыты по умолчанию.Я добавил метку времени комментариев в атрибуте данных li s.

Пример:

<ul class="comments">
  <li data-timestamp="0">Check my page fans : http://www.facebook.com/ITBFLR</li>
  <li data-timestamp="185525">great sub!</li>
  <li data-timestamp="256931">@greenmono: Haha thank's dude</li>
  <li data-timestamp="497073">Wicked mix de ;)</li>
</ul>

На треке может быть много комментариев (100+),Мой проигрыватель возвращает текущий прогресс трека с интервалом в миллисекундах.

Можно ли использовать селектор для сопоставления всех li с отметкой времени, меньшей прогресса текущего трека?

Я знаю тамнекоторые пользовательские плагины селектора для jQuery (например, лучший селектор данных для jQuery ), но мне интересно, будет ли это огромным узким местом (с точки зрения производительности).

Итак: будет ли этобудет разумно использовать это решение или я делаю это неправильно?

Answer 1

Вы всегда можете сделать DOM, выбрав onload и сохранить данные во внутреннем объекте. Затем просто извлекайте соответствующие данные в любое время, не касаясь и не пересекая DOM.

Что-то вроде этого может работать:

var data = [],
    i = 0;

$(function() {
    $('.comments').find('li').each(function() {
        data.push({
            ts: this.getAttribute('data-timestamp'),
            el: $(this).hide()
        });
    });
});

onProgress(function(timestamp) { // simulated callback from the player
    while( data[i].ts < timestamp ) {
        data[i++].el.show();
    }
});

Если бы я был там, где вы, я бы сделал это наоборот; распечатайте данные JSON с сервера, затем создайте элементы списка, используя JavaScript. Если вам действительно не нужен запасной вариант "без JS" ...