0

ループの反復ごとに、Web フォームの一部としてテーブルに行を追加する JavaScript FOR ループがあります。ループは進むにつれて次第に遅くなります。

15 行が追加されたテーブルの時間は次のとおりです。

    sample 1 start: 1355250090.832 end: 1355250090.873 difference: 0.041
    sample 2 start: 1355250090.873 end: 1355250090.952 difference: 0.079
    sample 3 start: 1355250090.953 end: 1355250091.393 difference: 0.440
    sample 4 start: 1355250091.393 end: 1355250091.659 difference: 0.266
    sample 5 start: 1355250091.659 end: 1355250092.284 difference: 0.625
    sample 6 start: 1355250092.284 end: 1355250093.159 difference: 0.875
    sample 7 start: 1355250093.159 end: 1355250093.863 difference: 0.704
    sample 8 start: 1355250093.863 end: 1355250094.924 difference: 1.061
    sample 9 start: 1355250094.924 end: 1355250095.924 difference: 1.000
    sample 10 start: 1355250095.924 end: 1355250097.175 difference: 1.251
    sample 11 start: 1355250097.175 end: 1355250098.362 difference: 1.187
    sample 12 start: 1355250098.362 end: 1355250099.690 difference: 1.328
    sample 13 start: 1355250099.690 end: 1355250101.378 difference: 1.688
    sample 14 start: 1355250101.378 end: 1355250103.003 difference: 1.625
    sample 15 start: 1355250103.003 end: 1355250104.878 difference: 1.875

テーブル行を追加する関数の JavaScript は次のとおりです。

     function addSample(){

            fTrain+="addSample();<br>";

          var sample="";
          var temp="";
          var tempString="";
          var endCode="";
          var helper1="";
          var helper2="";
          var dcf="";
          var dct="";
          var useDate=false;
          var dateToUse="";
          var slDays="";
          var tsid="";
          var tabNDX=0;

          //alert(sampleCount.toString());
          //$("#statUpdate").html("adding sample: "+sampleCount.toString());

          if(sampleCount>=20){
                var tdt="WARNING\n";
            tdt+="You have exceeded 20 samples. To avoid data loss, you should not put more ";
            tdt+="than 20 samples per submission.";
            alert(tdt);
          }

          // copy existing values into array
          if(sampleCount>=1){
              var tArray="";
              tArray=copyValues(); 

              var ticArray="";
              ticArray=copyTics();
            }  

          if(ie){
                endCode="</TABLE><BR>&nbsp;";  // for some reason this has to be upper case in IE
          }else{
              endCode="</table><br>&nbsp;";
          }     

          sampleCount=sampleCount+1;
          tabNDX=1000+(sampleCount*20);  // needs a buffer to seperate from other tab indecies in virtual windows

          if (bColor=="#ffffff"){
                    bColor=ltOrange;
            }else{
                  bColor="#ffffff";
            }

         // add header on first addition only
            if(sampleCount==1){
                sample+="<table border='1' id='sampleTable' style='border-collapse:collapse;border:1pt solid black'>";

                sample+="<tr>";
                sample+="<th class='tsmall'>copy cell <input onChange='needSave=1;' checked type='checkbox' name='CST' id='CST'></th>";
                sample+="<th class='tsmall'>&nbsp;</th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CGL' id='CGL'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CPT' id='CPT'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CCM' id='CCM'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CDP' id='CDP'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CED' id='CED'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CDVT' id='CDVT'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CTSPD' id='CTSPD'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CVSPD' id='CVSPD'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CMNM' id='CMNM'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CE' id='CE'></th>";
                sample+="<th class='tsmall'><input onChange='needSave=1;' style='visibility:hidden' type='checkbox' name='CDVM' id='CDVM'></th>";           
                sample+="<th class='tsmall'><input onChange='needSave=1;' checked type='checkbox' name='CTECH' id='CTECH'></th>";
                sample+="<th class='tsmall'>&nbsp;</th>";
                sample+="</tr>";

                sample+="<tr>";
                sample+="<th class='ysmall' style='background:#ffffff' colspan='7'>&nbsp;</th>";
                sample+="<th class='ysmall' colspan='4'>Stud Targets</th>";
                sample+="<th class='ysmall' style='background:#ffffff' colspan='6'>&nbsp;</th>";
                sample+="</tr>";        

                sample+="<tr>";
                sample+="<th class='small'>Sample type</th>";
                sample+="<th class='small'>Sample ID</th>";
                sample+="<th class='small'>Genetics</th>";
                sample+="<th class='small'>Pkg. type</th>";
                sample+="<th class='small'>Conc.<br>method</th>";
                sample+="<th class='small'>Date<br>processed</th>";
                sample+="<th class='small'>Expiration<br>date</th>";
                sample+="<th class='small'>DVT</th>";
                sample+="<th class='small'>TSD</th>";
                sample+="<th class='small'>VSD</th>";
                sample+="<th class='small'>Min<br>normal</th>";
                sample+="<th class='small'>Extender</th>";
                sample+="<th class='small'>Dose vol.</th>";
                sample+="<th class='small'>Proc. tech</th>";        
                sample+="<th class='small'>del</th>";       
                sample+="</tr>";

                // decide if to copy date from above
                                dcf=document.getElementById('dateCollectedFrom').value;
                                dct=document.getElementById('dateCollectedTo').value;

                                // same date
                                if(dcf==dct){
                                        useDate=true;
                                        dateToUse=dcf;          
                                }

                                if(useDate===false){
                                        // one date only has value
                                        if( dcf!=="" && dct==="" ){
                                                useDate=true;
                                                dateToUse=dcf;  
                                        }

                                        // one date only has value
                                        if( dct!=="" && dcf==="" ){
                                              useDate=true;
                                                dateToUse=dct;                  
                                        }           
                                }
                // end date decision block              

            } // end if sample counter == 1

            // sample guts
            var sc=sampleCount.toString();

            sample+="<tr id='tr_"+sc+"' >";     

            var inputSize="4";  // default text box input size      

            // sample type
            sample+="<td valign='top' style='background:"+bColor+";'><select onChange='needSave=1;' tabindex='"+(tabNDX).toString()+"' style='background:"+bColor+";font-size:8pt;' name='sampleType_"+sc+"' id='sampleType_"+sc+"' ";
            sample+="onClick=\"if(this.value.indexOf('other')>-1){document.getElementById('otherSample_"+sc+"').style.visibility='visible'}else{document.getElementById('otherSample_"+sc+"').style.visibility='hidden'};\" " ;
         sample+="onBlur=\"if(this.value.indexOf('other')>-1){document.getElementById('otherSample_"+sc+"').style.visibility='visible'}else{document.getElementById('otherSample_"+sc+"').style.visibility='hidden'};\" >";
         sample+=">"+sampleTypes()+"</select><br>";     
            sample+="<input size='10' style='background:"+bColor+";font-size:8pt;visibility:hidden'  type='text' name='otherSample_"+sc+"' id='otherSample_"+sc+"'></td>"   ;       

            // sample ID
            tsid="";
            sample+="<td valign='top' style='background:"+bColor+";'><input onkeypress='return checkKey2(this,event);' onchange='needSave=1;updateAnaArray(this.value,"+sc+");' tabindex='"+(tabNDX+1).toString()+"' size='8' style='background:"+bColor+";font-size:8pt;' "+tsid+" type='text' name='sampleID_"+sc+"' id='sampleID_"+sc+"'><br>";
            sample+="<button style='font-size:8pt' onmouseout='hoverAnalysis(\"clear\");' onmouseover='hoverAnalysis("+sc+");'  onClick='if(uniqueSample("+sc+")){analyze("+sc+")}'>Analysis</button>";
            sample+="<span style='display:none;' id='osid_"+sc+"'></span>";
            sample+="</td>"

            // genetic line-breed
            sample+="<td valign='top' style='background:"+bColor+";'><input onChange='needSave=1;' tabindex='"+(tabNDX+2).toString()+"' size='"+inputSize+"' style='background:"+bColor+";font-size:8pt;'  type='text' name='glb_"+sc+"' id='glb_"+sc+"'></td>";

            // packaging type
            sample+="<td valign='top' style='background:"+bColor+";'>"
            sample+="<span onClick='displayPT("+sc+")' onMouseOver='this.style.cursor=\"pointer\"' style='font-size:8pt' id='pthDisplay_"+sc+"'>[+]</span><br>";
            sample+="<div id='ptHolder_"+sc+"' style='display:none'>";
            sample+="<select style='background:"+bColor+";font-size:8pt;' name='packageType_"+sc+"' id='packageType_"+sc+"' ";
            sample+="onChange='needSave=1;packageLogic("+sc+")' ";
          sample+="onBlur='packageLogic("+sc+")' ";
          sample+=">"+packagingTypes()+"</select>";     
            sample+="<span id='pkt_"+sc+"'></span><input size='10' style='background:"+bColor+";font-size:8pt;display:inline'  type='text' name='otherPackage_"+sc+"' id='otherPackage_"+sc+"'>";       
            sample+="<div id='packDiv_"+sc+"'></div>";
            sample+="</div>";
            sample+="</td>"

            // concentration method
            sample+="<td valign='top' style='background:"+bColor+";'><select onChange='needSave=1;' style='background:"+bColor+";font-size:8pt;' name='cm_"+sc+"' id='cm_"+sc+"' ";
            sample+="onClick='checkCM("+sc+")' ";
            sample+="onBlur='checkCM("+sc+")' ";
            sample+=">"+cMethod()+"</select><br>";       
            sample+="<span name='cmSpan_"+sc+"' id='cmSpan_"+sc+"' >";
            sample+="<input size='8' onChange='needSave=1;' style='background:"+bColor+";font-size:8pt;visibility:visible' type='text' name='otherCM_"+sc+"' id='otherCM_"+sc+"'>";         
            sample+="</span><br>";
            sample+="<span name='oOtherCM_"+sc+"' id='oOtherCM_"+sc+"' >";
            sample+="</span></td>";

            // date processed
            helper2="storageLife_"+sc;      
            if(sampleCount==1){
                    // put in default date if logic fulfilled
                    sample+="<td valign='top' align='right' style='background:"+bColor+";'><input onChange='needSave=1;' tabindex='"+(tabNDX+7).toString()+"' value='"+dateToUse+"' size='8' onBlur='if(this.value!=\"\"){if(isDate(this.value,1)==false){this.focus()}else{";
            }else{
                  sample+="<td valign='top' align='right' style='background:"+bColor+";'><input onChange='needSave=1;' tabindex='"+(tabNDX+7).toString()+"' size='8' onBlur='if(this.value!=\"\"){if(isDate(this.value,1)==false){this.focus()}else{";      
            }       
            sample+="figureLife(document.getElementById(\""+helper2+"\").value,"+sc+",\"dp\");}}' style='background:"+bColor+";font-size:8pt;'  type='text' name='dateProc_"+sc+"' id='dateProc_"+sc+"'> ";     
            helper1="dateProc_"+sc;  
            sample+="<button id='labDO1_"+sc+"' onClick='displayDatePicker(\""+helper1+"\")' style='width:10px;height:10px'></button><br>";
            sample+="<span id='labSLD_"+sc+"' style='font-size:8pt;background:#ffffc0;'>storage life:</span><br>";
            if(sc==1){
                slDays=" value='5' ";
            }else{
                slDays="";
          }             
            sample+="</td>";

            // expiration date
            helper1="expirationDate_"+sc;   
            sample+="<td valign='top' style='background:"+bColor+";'><input tabindex='"+(tabNDX+8).toString()+"' size='8' onChange='needSave=1' onBlur='figureLife(document.getElementById(\""+helper2+"\").value,"+sc+",\"ed\");' style='background:"+bColor+";font-size:8pt;'  type='text' name='expirationDate_"+sc+"' id='expirationDate_"+sc+"'> ";
            sample+="<button id='labDO2_"+sc+"' onClick='displayDatePicker(\""+helper1+"\");' style='width:10px;height:10px'></button><br>";

            // storage life
            sample+="<input style='background:#ffffc0' "+slDays+" size='"+inputSize+"' onBlur='figureLife(this.value,"+sc+",\"sl\")' onChange='needSave=1;figureLife(this.value,"+sc+",\"sl\")' style='background:"+bColor+";font-size:8pt;'  type='text' name='storageLife_"+sc+"' id='storageLife_"+sc+"'></td>";     

            // dose volume target (dvt)
            sample+="<td valign='top' style='background:"+bColor+";'><input tabindex='"+(tabNDX+9).toString()+"' onChange='needSave=1;checkField(this.value,\"dv\",this.id)' size='"+inputSize+"' style='background:"+bColor+";font-size:8pt;'  type='text' name='dvt_"+sc+"' id='dvt_"+sc+"'></td>";

            // total sperm per dose (tsd)
            sample+="<td valign='top' style='background:"+bColor+";'><input tabindex='"+(tabNDX+10).toString()+"' onChange='needSave=1;checkField(this.value,\"vs\",this.id)' size='"+inputSize+"' style='background:"+bColor+";font-size:8pt;'  type='text' name='tspd_"+sc+"' id='tspd_"+sc+"'></td>";

            // viable sperm per dose VSD
            sample+="<td valign='top' align='right' style='background:"+bColor+";'><input tabindex='"+(tabNDX+11).toString()+"' size='6' onChange='needSave=1;checkField(this.value,\"vs\",this.id)' style='background:"+bColor+";font-size:8pt;'  type='text' name='vspd_"+sc+"' id='vspd_"+sc+"'><br>";
            sample+="<span style='font-size:8pt;background:#ffffc0' id='labMOT_"+sc+"' >motil<input onChange='needSave=1;' tabindex='"+(tabNDX+12).toString()+"' type='checkbox' id='vspdMot_"+sc+"' name='vspdMot_"+sc+"'></span>";
            sample+="</td>";

            // minimum normal morphology
            sample+="<td valign='top' style='background:"+bColor+";'><input tabindex='"+(tabNDX+13).toString()+"' onChange='needSave=1;checkField(this.value,\"mn\",this.id)' size='6' style='background:"+bColor+";font-size:8pt;'  type='text' name='mnm_"+sc+"' id='mnm_"+sc+"'><br>";
            sample+="<span style='font-size:8pt;background:#ffffc0' id='labMOR_"+sc+"' >morph<input onChange='needSave=1;' tabindex='"+(tabNDX+14).toString()+"' type='checkbox' id='vspdMor_"+sc+"' name='vspdMor_"+sc+"'></span></td>";       

            // extender
            sample+="<td valign='top' style='background:"+bColor+";'><select onChange='needSave=1;' tabindex='"+(tabNDX+15).toString()+"' style='background:"+bColor+";font-size:8pt;' name='extender_"+sc+"' id='extender_"+sc+"' ";
            sample+="onClick=\"if(this.value.indexOf('other')>-1){document.getElementById('otherExtender_"+sc+"').style.visibility='visible'}else{document.getElementById('otherExtender_"+sc+"').style.visibility='hidden'};\" " ;
         sample+="onBlur=\"if(this.value.indexOf('other')>-1){document.getElementById('otherExtender_"+sc+"').style.visibility='visible'}else{document.getElementById('otherExtender_"+sc+"').style.visibility='hidden'};\" >";
         sample+=">"+extenderTypes()+"</select><br>";       
            sample+="<input size='10' onChange='needSave=1;' style='background:"+bColor+";font-size:8pt;visibility:visible'  type='text' name='otherExtender_"+sc+"' id='otherExtender_"+sc+"'>";       
                    // pooled-ss
                    // they decided not to use this field so I'm just hiding it under extender
                    // instead of changing all of the management functions and CGI
                    sample+="<span style='display:none'>";
                    sample+="<br><span sid='labP_"+sc+"' >Pooled:</span><input onChange='needSave=1;' type='radio'  name='pss_"+sc+"' id='Ppss_"+sc+"'><br>" ;
                    sample+="<span id='labSS_"+sc+"' >SS:</span> <input  onChange='needSave=1;' type='radio'  name='pss_"+sc+"' id='Spss_"+sc+"'>"  ;           
                    sample+="</span>";
            sample+="</td>" ;           

            // dose volume measured
            sample+="<td valign='top' style='background:"+bColor+";'><input tabindex='"+(tabNDX+17).toString()+"' onChange='needSave=1;checkField(this.value,\"dv\",this.id)' size='"+inputSize+"' style='background:"+bColor+";font-size:8pt;'  type='text' name='dvm_"+sc+"' id='dvm_"+sc+"'><br>";
            sample+="<span style='font-size:8pt'>Client tech:</span><br>";      
            sample+="<input onChange='needSave=1;' size='8' tabindex='"+(tabNDX+18).toString()+"' style='background:"+bColor+";font-size:8pt;' type='text' id='cTech_"+sc+"' name='cTech_"+sc+"'></td>";

            // proc tech
            sample+="<td valign='top' style='background:"+bColor+";'><span style='font-size:8pt'>KRC tech:</span><br><select onChange='needSave=1;' tabindex='"+(tabNDX+19).toString()+"' style='background:"+bColor+";font-size:8pt;' name='KRCtech_"+sc+"' id='KRCtech_"+sc+"'>"+techList+"</select>";
            sample+="</td>";

            // remove sample
            sample+="<td align='center' valign='center' style='background:"+bColor+";'><br><button id='labDB_"+sc+"' class='bClass' style='width:25px' onClick='needSave=1;removeSample("+sc+");'><img src='"+httpsBase+"/images/rem.gif'></button></td>";      

            // end row
            sample+="</tr>";

            var sh=document.getElementById('sampleHolder');         

            if(sampleCount==1){
              sample+=endCode;  
              sh.innerHTML=sample;
            }else{                          
                // adjust ending html

                // firefox is stripping out extender values here??  
                // save extender values
                // also mot/morph values

                var theEx=new Array();
                var theMot=new Array();
                var theMor=new Array();

                for(var i=1;i<=(sampleCount-1);i++){
                  theEx[i]=$("#extender_"+i.toString()).val();            
                    theMot[i]=$("#vspdMot_"+i.toString()).attr('checked');
                    theMor[i]=$("#vspdMor_"+i.toString()).attr('checked');
                }

                temp=sh.innerHTML;
                tempString=replace(temp,endCode,"");   
                sh.innerHTML=tempString+sample+endCode;

            }           

            var ef=getEdit();
            if(ef != -1){       // only paste values when entering a new sample         
                    if(sampleCount!=1){
                          // must value tics before pasting values!!
                          pasteTics(ticArray);
                            pasteValues(tArray);
                    }
            }   

            ticArray=[];
            tArray=[];

            // replace extender values  
            if(sampleCount>1){
                for(i=1;i<=(sampleCount-1);i++){
                    $("#extender_"+i.toString()).val(theEx[i]);
                    $("#vspdMot_"+i.toString()).prop("checked",theMot[i]);
                    $("#vspdMor_"+i.toString()).prop("checked",theMor[i]);
                }           

                // make the new sample "other"
                $("#extender_"+sampleCount.toString()).val("other");

                // if copy down extender is checked then apply to new sample
                if( $('#CE').is(':checked')){           
                    var lastCE=$("#extender_"+(sampleCount-1).toString()).val();    
                    $("#extender_"+sampleCount.toString()).val(lastCE);     
                }       

                if( $('#CVSPD').is(':checked')){            
                    var lastMot=$("#vspdMot_"+(sampleCount-1).toString()).attr('checked');
                    $("#vspdMot_"+(sampleCount).toString()).prop("checked",lastMot);
                }           

                if( $('#CMNM').is(':checked')){         
                    var lastMor=$("#vspdMor_"+(sampleCount-1).toString()).attr('checked');
                    $("#vspdMor_"+(sampleCount).toString()).prop("checked",lastMor);    
                }           

            }

             for(i=1;i<=maxIterations;i++){  
             //for(i=1;i<=sampleCount;i++){  
                  if(document.getElementById("sampleID_"+i.toString())){              
                        loadIconAnalysis( $("#sampleID_"+i.toString()).val() );
                    }   
             }

     } // end add sample

これは addSample() 関数が呼び出される方法であり、私の時間が取られました:

            for(i =1;i<=editSampleCount;++i){
                sseconds = new Date().getTime() / 1000;
                tempTime+="sample "+i.toString()+" start: "+sseconds.toFixed(3)+" ";
                $(document).ready(function() {
                    addSample();    
                });
                eseconds = new Date().getTime() / 1000;
                tempTime+="end: "+eseconds.toFixed(3)+" difference: "+(eseconds-sseconds).toFixed(3)+"<br>";
            }   
4

0 に答える 0