页面挂断，搜索太多

Question

I used PHP to create an HTML page, which compiles a list of data points and pushes them into an array, declares the array in the header, and also echo's a huge list of form input objects into the body. The list I'm working with is just under 15,000 lines which are put into 1 array.

I more or less created a search box that when I blur() an action is supposed to occur, Javascript function is supposed to search through the array and hide unmatched form options and display matches. This seems to work fine up to 5000 but if I have it run through all 15000 array items it hangs up and freezes.

I'm currently hosting it on a free site while I test... here is the link to the actual page TEST PAGE that hangs up

I'm including a snippet of the JS code with a truncated array so you don't have to scroll for thousands of lines.

  <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> 

It doesn't appear to be an issue with the code not functioning. As I mentioned, if I limit the search to just 1000 array values it seems to work, its the massive amount of array values that is killing the page.

Any suggestions? Thank you in advance!

Answer 1

With this many data points, you should probably do this on the server. However, you can try the following:

• instead of using a for loop (which completely freezes the browser until it is done), use a setInterval that checks a new result every 5 ms or so. Periodically, check if all the results have been searched, and clear the interval if so. It will still take a bit to search, but won't freeze the browser.

• search only until you have a set number of results (40 or so), and store the last index of the array that was searched. Wait to load more searches until the user scrolls down the page.

Also, you should probably implement an infinite scroll for displaying results. My browser froze and had to be restarted just opening the link you attached.

Update: if you don't want the items displayed until after you search, you should have no items on the page initially and add them when they match the search. This prevents the initial lag, prevents you from having to change the visibility of every element, and reduces the number of elements on the page (which causes issues).

Answer 2

Thank you for all your input and suggestions.

I went back and took out all of entries when listed in the form. Then I had JS create a list of checkbox inputs based on all the positive results and element.innerHTML the results. The array is still a huge list on client side through which the JS searches for matches. I updated the code in the link from my original post to show the faster and working result.

  <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> 

In the past I've had poor results with forms and innerHTML added options, which I'll tackle another time when I try to move this code into the larger project.

Thank you again