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

Most efficient way to populate a page through specified time intervals?

本文关键字:方法 有效 填充 时间      更新时间:2023-09-26

我会直接进入它。

布局.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" />

主.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 在填充新数据时会快速"闪烁",这也很烦人。

感谢您的阅读。

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

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

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