通過指定時間間隔填充頁面的最有效方法？

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