指定された時間間隔でページを取り込む最も効率的な方法は？

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を変更する必要ならば、私は気にしません構造。

たとえば、2つのコーデックが同時に使用されない場合、常に4つのコーナーのdivがあることは悪いことです。また、リクエストごとにajaxレスポンスが変更されるため、新しいデータが入力されるとすぐにdivが「急速に点滅」することもあり、迷惑です。

読んでいただきありがとうございます。

Answer 1

data.c#を配列に変換すると、data.c[1]となり、単純なfor()ループを使用して1つの出力ブロックのみを実行します。

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