通过指定时间间隔填充页面的最有效方法？

Question

我会直接去找它。

的layout.html

<table> 
<tr> 
    <td><div id="corner1"></div><div id="c11"></div><div id="c12"></div></td> 
    <td><div id="corner2"></div><div id="c21"></div><div id="c22"></div></td> 
</tr> 
<tr> 
    <td><div id="corner3"></div><div id="c31"></div><div id="c32"></div></td> 
    <td><div id="corner4"></div><div id="c41"></div><div id="c42"></div></td> 
</tr> 
</table> 
<input type="hidden" value="12" name="tableid" /> 

main.js

populateID = setInterval(Populate, 1000); 
function Populate() { 
$.ajax({ 
    url: 'jquery/populate.php', 
    data: 'tableid=' + $("#tableid").val(), 
    success: function(data) { 
    fillem(data); 
    } 
}); 
} 

function fillem(data) { 
if(data.c1) { 
    $("#c11").html(data.c1); 
    $("#c12").html(data.filler); 
}else{ 
    $("#c11").html(data.filler); 
} 
if(data.c2) { 
    $("#c21").html(data.c2); 
    $("#c22").html(data.filler); 
}else{ 
    $("#c21").html(data.filler); 
} 
if(data.c3) { 
    $("#c31").html(data.c3); 
    $("#c32").html(data.filler); 
}else{ 
    $("#c31").html(data.filler); 
} 
if(data.c4) { 
    $("#c41").html(data.c4); 
    $("#c42").html(data.filler); 
}else{ 
    $("#c41").html(data.filler); 
} 

if(data.timer) { 
    $("#timer").html(data.timer); 
}else{ 
    $("#timer").html(""); 
} 

if(data.corner) { 
    $("#corner" + data.corner).html("ACTIVE"); 
} 
} 

我敢肯定，这可以以更有效的方式来完成，我不关心，如果它涉及到改变DOM结构体。

例如，当它们中的任何一个都不能同时使用时，它总是有4个“角落”divs听起来很糟糕。而且由于ajax响应会在每次请求时发生变化，有时一个div在填充新数据时会“快速闪烁”，这也很烦人。

感谢您的阅读。

Answer 1

将data.c#转换为数组，因此它是data.c[1]，然后使用简单的for()循环仅执行一个SINGLE输出块。

for (i = 1; i <= 4; i++) { 
    if(data.c[i]) { 
     $('#c' + i + '1').html(data.c[i]); 
     $('#c' + i + '2').html(data.filler); 
    } 
} 

Answer 2

下面是一些小的修改。试着让我知道，

注：data['c'+i]将评估到的东西是一样的data.c1，data.c2，data.c3和data.c4

function fillem(data) { 
    for (var i = 1; i <= 4; i++) { 
     if (data['c'+i]){ 
      $('#c'+i+'1').html(data['c'+i]); 
      $('#c'+i+'2').html(data['filler']); 
     } else { 
      $('#c'+i+'1').html(data['filler']); 
     } 
    } 

if(data.timer) { 
    $("#timer").html(data.timer); 
}else{ 
    $("#timer").html(""); 
} 

if(data.corner) { 
    $("#corner" + data.corner).html("ACTIVE"); 
} 
}