Javascript - 显示和隐藏大量列表项的最快方式

问题描述

当用户浏览Google地图时，会更新当前可见标记的列表。此列表最多包含1000个项目，当一次显示或隐藏数百个li时，它会减慢速度。它不到半秒钟，但它变得很烦人。

As the user pans around a Google Map, a list of of currently visible markers is updated. This list contains up to 1000 items, and it slows down when several hundred li's are shown or hidden all at once. It's less than half a second, but it's getting annoying.

数组（newLiList）包含现在应该可见的项目。另一个数组（currentLiList）具有先前可见的项目。两个数组都包含li的id作为索引。

An array (newLiList) contains the items which should now be visible. Another array (currentLiList) has the items which were previously visible. Both arrays contain the ids of the li's as indexes.

for (var i in newLiList) {
    if (currentLiList[i] != true) {
        $("ul#theList li#"+i).show();
    }
}
for (var i in currentLiList) {
    if (newLiList[i] != true) {
        $("ul#theList li#"+i).hide();
    }
}

有更快的方法吗？

推荐答案

您可以直接在数组中存储< li> 元素您不必执行数百个CSS选择器查找。然后代替 $（ul＃theList li＃+ i）你只需要 liArray [i] 。

You could store the <li> elements in an array directly so you don't have to do hundreds of CSS selector lookups. Then instead of $("ul#theList li#"+i) you just do liArray[i].

仅供参考，ul＃theList li＃< i>相当于 ＃< i>因为元素ID是（应该是）唯一的。您不需要额外的上下文。

FYI, "ul#theList li#<i>" is equivalent to just "#<i>" since element IDs are (supposed to be) unique. You don't need the extra context.

这篇关于Javascript - 显示和隐藏大量列表项的最快方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！