基於時間顯示列表項目

我在我的網站上創建了一個音頻播放器。基於時間顯示列表項目

在正在播放的曲目中可能會有基於時間的評論，並且我希望在曲目進度達到評論時間戳時顯示它們。

我的設置是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

基於時間顯示列表項目

回答

相關問題