Question

我这里有一大堆代码

//function that hides unwanted page elements based on a what is entered in  a search bar
function pageSearch() {
//when the function is called it retrieves what is entered in the search bar
//*****************variables*****************\\
var userInput = document.getElementById("boxOfSearching").value;
var fields = [];
//an array of all article tags
fields = document.getElementById("bulletin-course-listings").getElementsByTagName("li");
var holder = "";
var counter = 0;
var childArray = [];
//*****************processing and output*****************\\
    //while loop to sort through array elements
while (counter < fields.length)
{
     childArray = fields[counter].getElementsByTagName("strong");
     holder = childArray[0].innerHTML.toLowerCase();
     if (holder.indexOf(userInput) == -1)
     {
          fields[counter].setAttribute("style", "display:none");
     }
     else
     {
       fields[counter].setAttribute("style", "");
     }
     counter++;
}
}

现在，当我在一个名为boxofsearching的id（在keyup上调用此函数）的文本框中键入内容时，应该发生什么（以及发生了什么）。它搜索元素列表并获取标记中的内容。然后将它与用户输入的内容进行比较，如果它不包含它，则删除该元素。

但是，我在包含数百个元素的列表中使用它。键入时我的浏览器会锁定，内存使用情况和CPU使用率会持续几秒钟然后结束。有没有更有效的方法呢？

Answer 1

您是打算删除实际的DOM元素，还是仅仅通过CSS隐藏它们？如果你实际上没有从DOM中删除它们，你可以检索一次元素数组，如下所示：

var fields = array()

document.onload = function() {
    fields = document.getElementById("bulletin-course-listings").getElementsByTagName("li");
}

function pageSearch() { ... }

然后您可以删除函数中fields的定义。这应该会有所改善。

Answer 2

好吧，你的字段应该是一个全局变量，最好是一个简单的JS对象而不是元素列表，比如

fields = [{"obj1"}, {"obj2"}];

每个keyup上的getElementsByTagName可能会降低它的速度。

无论如何要减少这段代码的内存占用量？

2 个答案: