我有一个 javascript FOR 循环，它为循环的每次迭代添加一行到表中，作为 Web 表单的一部分。循环变得越来越慢。
以下是添加了 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> "; // for some reason this has to be upper case in IE
}else{
endCode="</table><br> ";
}
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'> </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'> </th>";
sample+="</tr>";
sample+="<tr>";
sample+="<th class='ysmall' style='background:#ffffff' colspan='7'> </th>";
sample+="<th class='ysmall' colspan='4'>Stud Targets</th>";
sample+="<th class='ysmall' style='background:#ffffff' colspan='6'> </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>";
}