javascript - 让Jquery\Javascript更高效

Question

我有以下代码来动态生成选择列表。当检索的记录在 0-300 条记录之间时，该代码可以正常工作。然而，当我尝试处理超过这个数字的记录时，确切地说是 671 条记录，浏览器(IE、FF、Chrome、Opera)挂起，并且 JavaScript 似乎占用了大量资源，并且浏览器在选择后变得缓慢等待5分钟后终于生成了选项....我正在寻找一种方法来提高效率并防止此类挂起，因为我将处理最多 5000 条记录

$("#idea_selectrel").on("change",function(){
       var attributeid = $("option:selected",this).val();
       $.post("/OCSRM/PopulateHTMLTablesServlet.do",{"attributeid":attributeid,"table":'idearelations'},function(data){
           if(!$.isEmptyObject(data))
           {
               $("#idea_selectrelvalue option:not(:first)").remove();
               var html='';
               var len = data.length;               
               for(var i=0,len = data.length; i<len; i++ )
               {
                   var relvalue = [data[i].relvalue];
                   var description = [data[i].description];
                   html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
                   $("#idea_selectrelvalue").append(html).show();
               }
           }
           else
           {
               alert('No data found.');

           }


       },'json');
       //alert(attributeid);

    });

Answer 1

您的代码正在构建一长串包含选项的 HTML。它还一遍又一遍地将字符串附加到 <select>元素。

移动.append()到循环之后:

           for(var i=0,len = data.length; i<len; i++ )
           {
               var relvalue = [data[i].relvalue];
               var description = [data[i].description];
               html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
           }
           $("#idea_selectrelvalue").append(html).show();