基于时间显示列表项目

我在我的网站上创建了一个音频播放器。基于时间显示列表项目

在正在播放的曲目中可能会有基于时间的评论，并且我希望在曲目进度达到评论时间戳时显示它们。

我的设置是ul，评论为li s。默认情况下，隐藏li。我在li的数据属性中添加了注释的时间戳。

实施例：

<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自定义选择器插件（例如A better data selector for jQuery），但我想知道这是否会是一个巨大的瓶颈（性能明智）。

所以：使用这个解决方案是明智的，还是我做错了？

来源

2011-12-20 PeeHaa

无论您当前的解决方案的性能如何：您可以创建二叉搜索树或类似的数据结构，从而轻松选择小于给定值的元素（键是时间戳，赋值给DOM节点的引用或者只是你必须插入的注释）。或者使用最小堆作为优先级队列，并始终删除第一个项目。也许以这种方式存储数据也可以让你做其他事情。只是我的想法... :) – 2011-12-20 23:55:04

是否有一个原因，你没有排序这些在服务器端显示它们之前？最好不要在客户端上这样做。 – asawilliams 2011-12-20 23:58:25

@asawilliams nopez这只是我显示一个坏榜样：P – PeeHaa 2011-12-21 00:06:18

您可以随时做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”后备...

来源

2011-12-20 23:56:27 David

基于时间显示列表项目

回答

相关问题