javascript - 如何使用动态时间重新加载 Div

Question

我有一个包含 JSON 数据的 HTML 表格，我将在部分 UI 上呈现这些数据。

我在做什么

• 我通过 ajax 一次调用完整数据，然后将数据分成 12-12 行，因为根据我的要求，一页最多可以有 12 行
• 我每 3 秒刷新一次 div，一次显示 12-12 行
• 当页面加载时，我显示前 12 行，然后在 3 秒后隐藏前 12 行并显示下 12 行
• 这就是我工作的方式

我正在努力实现的目标

• 加载完整数据后页面显示空白，不符合要求

• 我正在尝试在加载完整数据后再次调用 ajax

工作代码

$(document).ready(function() {
  myFun();

  function myFun() {
    $.ajax({
      async: true,
      url: "MenuDisplay",
      method: "GET",
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      success: function(tableValue) {

        addTable(tableValue)
        window.setInterval(showRows, 3000);
        showRows();

      }
    });
  }






  function showRows() {
    // Any TRs that are not hidden and not already shown get "already-shown" applies
    if ($(".hidden:lt(12)").length > 0) {
      $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    } else {
      $("tr:not(.hidden):not(.already-shown)").addClass("already-shown"); // this one is also calling after 3 seconds after last page i want to call this imidiatly 
      $.ajax({
        async: true,
        url: "MenuDisplay",
        method: "GET",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(tableValue) {

          addTable(tableValue)


        }
      });
    }

    $(".hidden:lt(12)").removeClass("hidden"); // this one is to hide previous  rows and show next 
  }

  function addTable(tableValue) {
    var $tbl = $("<table />", {
        "class": "table fixed"
      }),
      $tb = $("<tbody/>"),
      $trh = $("<tr/>");

    var split = Math.round(tableValue.length / 4);
    for (i = 0; i < split; i++) {
      $tr = $("<tr/>", {
        class: "hidden "
      });

      for (j = 0; j < 4; j++) {
        $.each(tableValue[split * j + i], function(key, value) {
          if (typeof(value) === "number") {
            $("<td/>", {
              "class": "text-right color" + (j + 1)
            }).html(value).appendTo($tr);
          } else {
            $("<td/>", {
              "class": "text-left color" + (j + 1)
            }).html(value).appendTo($tr);
          }

        });
      }
      $tr.appendTo($tb);
    }
    $tbl.append($tb);
    $("#DisplayTable").html($tbl);
  }



});

tbody>tr>td {
  white-space: normal;
  border-collapse: collapse;
  font-family: Verdana;
  font-weight: bold;
  font-size: .9em;
}

td:nth-child(2),
td:nth-child(4),
td:nth-child(6),
td:nth-child(8) {
  width: 85px;
  max-width: 85px;
  height: 63px
}

.fixed {
  table-layout: fixed;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

.hidden,
.already-shown {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>

检查 This fiddle用于使用 JSON 数据的工作示例

Answer 1

我检查了您的 fiddle 并了解您需要停止在最后一页中添加“已显示”类。我在这里包装了一个 if 条件。

if($(".hidden:lt(12)").length > 0){
  $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
}

您还应该考虑清除 else block 中的 setInterval。

添加 fiddle 供您引用https://jsfiddle.net/s7gqe1na/1/