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

Question

我会直截了当。

布局.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 个“角”div 听起来确实很糟糕。而且由于 ajax 响应会根据每个请求而改变，有时 div 在填充新数据时会快速“闪烁”，这也很烦人。

谢谢阅读。

Answer 1

将你的转换data.c#为数组，所以它是data.c[1]，然后你使用一个简单的for()循环来只做一个单一的输出块。

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");
 }
}