页面挂了，搜索太多

Question

我用PHP创建了一个HTML页面，它编译了一个数据点列表并将它们压入一个数组，在header中声明了这个数组，还有echo的一个巨大的表单列表输入 objects 到 body。我正在使用的列表不到 15,000 行，它们被放入 1 个数组中。

我或多或少地创建了一个搜索框，当我 blur() 一个动作应该发生时，Javascript 函数应该搜索数组并隐藏不匹配的表单选项并显示匹配项。这似乎可以正常工作到 5000，但如果我运行通过所有 15000 个数组项，它就会挂起并冻结。

我目前在测试时将其托管在一个免费网站上...这是 link 到实际页面 TEST PAGE that hangs up

我将一段 JS 代码包含在一个 t运行分类数组中，因此您不必滚动数千行。

  <script type="text/javascript" >
   
   var array_ICDDx = new Array('[ICD Code] Diagnosis','[001.0] Cholera due to vibrio cholerae','[001.1] Cholera due to vibrio cholerae el tor','[001.9] Cholera, unspecified','[002.0] Typhoid fever','[002.1] Paratyphoid fever A','[002.2] Paratyphoid fever B','[002.3] Paratyphoid fever C','[002.9] Paratyphoid fever, unspecified','[003.0] Salmonella gastroenteritis','[003.1] Salmonella septicemia','[003.20] Localized salmonella infection, unspecified','[003.21] Salmonella meningitis','[003.22] Salmonella pneumonia','[003.23] Salmonella arthritis','[003.24] Salmonella osteomyelitis',[...GOES ON FOREVER ~15000 ARRAY VALUES...]);
   
   function searchICDDx(ICDDx,line_start,line_end) {
    for (var a = line_start; a < line_end; a++) {
     var ICDDx_check = array_ICDDx[a].toLowerCase();
     var Row = "R" + a;
     if (ICDDx_check.search(ICDDx) >= 0) {
      document.getElementById(Row).style.display = "block";
     }
     else {
      document.getElementById(Row).style.display = "none";
     }
    }
    if (line_end < array_ICDDx.length) {
     line_end += 1000;
     if (line_end > array_ICDDx.length) { line_end = array_ICDDx.length; }
     var timer = setTimeout(searchICDDx(ICDDx,a,line_end),100);
//     searchICDDx(ICDDx,a,line_end);
    }
//    else if (line_end >= array_ICDDx.length) {
//     clearTimeout(timer);
     return;
//    }
   }
   
   function searchICD() {
    var find_ICD = Coder.elements['ICD'].value;
    if (find_ICD != "") {
     document.Coder.Dx.value = "";
     find_ICD = find_ICD.toLowerCase();
     searchICDDx(find_ICD,1,1000);
    }
   }

   function searchDx() {
    var find_Dx = Coder.elements['Dx'].value;
    if (find_Dx != "") {
     document.Coder.ICD.value = "";
     find_Dx = find_Dx.toLowerCase();
     searchICDDx(find_Dx,1,1000);
    }
   }
   
  </script>

这似乎不是代码无法运行的问题。正如我提到的，如果我将搜索限制为仅 1000 个数组值，它似乎可以工作，大量的数组值正在杀死页面。

有什么建议吗？提前致谢！

Answer 1

有了这么多数据点，您可能应该在服务器上执行此操作。但是，您可以尝试以下操作：

不要使用 for 循环（它会完全冻结浏览器直到完成），而是使用每 5 毫秒左右检查一次新结果的 setInterval。周期性地检查是否所有的结果都被搜索过，如果是则清除间隔。搜索仍然需要一点时间，但不会冻结浏览器。
仅搜索直到获得一定数量的结果（大约 40 个），并存储搜索到的数组的最后一个索引。等待加载更多搜索，直到用户向下滚动页面。

此外，您可能应该实施无限滚动来显示结果。我的浏览器死机了，必须重新启动才能打开您附加的 link。

更新： 如果您不希望在搜索之后才显示这些项目，您应该在页面上最初没有任何项目，并在它们与搜索相匹配时添加它们。这可以防止初始滞后，避免您必须更改每个元素的可见性，并减少页面上的元素数量（这会导致问题）。

Answer 2

感谢您的所有意见和建议。

我返回并删除了表格中列出的所有条目。然后我让 JS 根据所有正面结果和 element.innerHTML 结果创建一个复选框输入列表。该数组在客户端仍然是一个巨大的列表，JS 通过它搜索匹配项。我从原来的 post 更新了 link 中的代码，以显示更快的工作结果。

  <script type="text/javascript" >
   
   var array_ICDDx = new Array('[icd code] diagnosis','[001.0] cholera due to vibrio cholerae','[001.1] cholera due to vibrio cholerae el tor','[001.9] cholera, unspecified','[002.0] typhoid fever','[002.1] paratyphoid fever a',[...etc...]);
   
   function searchICDDx(array_Results,ICDDx,line_start,line_end) {
    for (var a = line_start; a < line_end; a++) {
     if (array_ICDDx[a].indexOf(ICDDx) >= 0) {
      array_Results.push("<span style='display:block' ><input type='checkbox' value='"+array_ICDDx[a]+"' >"+array_ICDDx[a]+"</span>");
     }
    }
    if (line_end < array_ICDDx.length) {
     line_end += 1000;
     if (line_end > array_ICDDx.length) { line_end = array_ICDDx.length; }
     searchICDDx(array_Results,ICDDx,a,line_end);
    }
    else if (line_end >= array_ICDDx.length) {
     var string_Results = array_Results.join("\n");
     document.getElementById("Results_here").innerHTML = string_Results;
     return;
    }
   }
   
   function searchICD() {
    var array_Results = new Array();
    var find_ICD = Coder.elements['ICD'].value;
    if (find_ICD != "") {
     document.Coder.Dx.value = "";
     find_ICD = find_ICD.toLowerCase();
     searchICDDx(array_Results,find_ICD,1,1000);
    }
   }

   function searchDx() {
    var array_Results = new Array();
    var find_Dx = Coder.elements['Dx'].value;
    if (find_Dx != "") {
     document.Coder.ICD.value = "";
     find_Dx = find_Dx.toLowerCase();
     searchICDDx(array_Results,find_Dx,1,1000);
    }
   }
   
  </script>

过去，我在使用表单和 innerHTML 添加选项时效果不佳，我将在尝试将此代码移至更大的项目时再解决这个问题。

再次感谢您

页面挂了，搜索太多

Page hangs up, too much to search

javascript

for-loop

freeze