javascript - 如何在给定时间内重新加载ajax调用函数-6ren

javascript - 如何在给定时间内重新加载ajax调用函数

转载作者：技术小花猫更新时间：2023-10-29 12:43:26

我有一项任务要做，我几乎完成了，但我一直坚持到最后一部分。

我在做什么

我有来自后端的 JSON 数据，我立即调用这些数据，然后将其显示为 HTML 表，但只有 10一次行，如果行超过 10 行，那么它会分两部分显示，前 10 行，然后在 5 秒后显示下 10 行，您可以查看我的代码片段

当它是表格的最后一页时，那么我正在做的是显示一个图像，如果图像是一个，那么表格-->图像如果有多个图像假设有2个图像而不是表格-->图像1--> table-->image2 这样它正在工作

当像 table-->image 这样的循环完成时，我再次调用 table 函数，因为它会有动态数据

这里的图像数据也是 JSON 格式的，它也是动态的，我面临着问题

问题

我有一个功能 imageFormatter()它具有 JSON 格式的图像数据

这些图像在我的数据库中设置为列名 IsActive所以当我调用这个数据时，我通过查询

在我的数据库中检查这个条件

现在我的表格显示在 UI 上，图像也显示出来，但在我的数据库中 IsActive标志可以随时更改 Y至 N

现在我想做的是我想要函数 imageFormatter()每 5 秒刷新一次，以便它可以获取新数据

改变那个 IsActive我有一个用户界面，用户在点击 go 时处理用户选择的任何图像我通过 servlet 将它保存到数据库中，现在只想显示调用这个imageFormatter()以便它可以拍摄最新的图像

这是我用来完成任务的方法。有没有更好的方法？

为了更好地理解，我已经注释了代码中的所有行

function myFun() {
  imageFormatter(); // here  I am calling because it will call again and again
  $.ajax({

    url: "MenuCounter",
    method: "GET",
    data: {
      counterCode: counterCode
    },
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(tableValue) {

      // tableValue i have provided in my code/post

      if (tableValue[0].outlet === 'NoData') {
        $.alert({
          title: 'Alert!',
          content: 'Display content Not available',
          onDestroy: function() {

          }
        });
      } else {

        addTable(tableValue, color1, color2, color3, color4) // colors are some colors
        showRows();

        interval = window.setInterval(showRows, 5000);



      }

    }
  });
}

$.ajax({
  async: true,
  url: "MenuCounterName",
  method: "GET",
  dataType: "json",
  data: {
    counterCode: counterCode
  },
  contentType: "application/json; charset=utf-8",
  success: function(data) { // geting counter name to display on to such as `Dosa Corner`
    if (data[0].outlet === 'NoData') {
      $.alert({
        title: 'Alert!',
        content: 'Display content Not available',
        onDestroy: function() {

        }
      });
    } else {
      // console.log(data[0]["Counter name"])
      $("#counterName").text(data[0]["Counter name"])
      color1 = data[0].Color1;
      color2 = data[0].Color2;
      color3 = data[0].Color3;
      color4 = data[0].Color4;

      myFun(); // this function is calling data from db

      $(".loader").hide();
      $(".overlay").hide();

    }
  }
});

function hideImage() {
  var imgno = (cnt % imgLen) + 1;
  $("#displayImage img").css("display", "none");
  $("#displayImage img:nth-child(" + imgno + ")").css("display", "block")

  $("#displayImage").show(); // show Image and hide table
  $("#DisplayTable").hide();

  setTimeout(function() {
    myFun();
    // I am calling my function after the last image is shown because it will call from db

  }, 5000);
  cnt++;
}


function showRows() {

  if ($(".hidden:lt(11)").length > 0) {
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    $("#displayImage").hide();
    $("#DisplayTable").show();
  } else {
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    hideImage();

    clearInterval(interval);

  }

  $(".hidden:lt(11)").removeClass("hidden");
}

function addTable(tableValue, color1, color2, color3, color4) {

  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 w3-animate-zoom"
    });
    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);
  var winHeight = ($(window).height() - 10);
  var HeadingHeight = $("#counterName").height();
  var heightForCells = (winHeight - HeadingHeight) / 11;
  $(".color1").css({
    "background": color1,
    "height": heightForCells
  });
  $(".color2").css({
    "background": color2
  });
  $(".color3").css({
    "background": color3
  });
  $(".color4").css({
    "background": color4
  });

}




/* setInterval(function(){
	 imageFormatter();// this will run after every 5 seconds
 }, 5000);
	*/


function imageFormatter() {  // this is my image function trying to call it with myfun() because myFun is dynamically calling after the last Image so it will also get called
  // clearInterval(interval);
  $.ajax({
    'url': 'DisplayImage',
    'method': 'GET',
    data: {
      counterCode: counterCode
    },
    'success': function(images) {
      console.log(images)
      for (var key in images) {

        var imageList = images[key];
        for (i = 0; i < imageList.length; i++) {
          var img = $('<img />').attr({
            'src': 'Image/' + key + '/' + imageList[i],
            'alt': key + '/' + imageList[i],
            'class': 'hidden w3-animate-zoom',
            'width': 90 + "%",
            'height': 680
          }).appendTo('#displayImage');
        }

      }
      imgLen = $("#displayImage img").length;
    },

    'error': function(err) {

    }

  });


}

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>
<div id="displayImage" style="display:none">

</div>

编辑/更新

如果我在用户单击按钮时刷新整个页面会更容易

我的第二种方法是，我有一个 HTML 表格，其中有表格 -> 图像，而在其他表格上，我有一个 Ui，用户可以在其中选择要显示的图像，然后我使用图像名称获取该值，如果复选框被选中然后保存到名为 ans IsActive 的数据库中如 Y如果不检查，则在数据库中保存为 N

所以我的想法是当用户单击设置图像页面上的按钮时，我将其保存到数据库中，以便从该 Java servlet 刷新另一个 HTML 页面，以便它从 db

获取最新数据

一旦它是最后一行，我就会调用我的函数，同样我正在用 Image 做它，但它需要时间并且不能正确渲染
我在显示图像后调用我的函数 addTable(tablevalue) 因为它可能有动态数据，所以我想要做的是调用 imageFormatter();也是这样，当表数据加载时，它也会刷新数据
tablevalue

    [{
    "Item Name": "VAT 69 60",
    "SellingPrice": 225
  }, {
    "Item Name": "VAT 69 30",
    "SellingPrice": 112
  }, {
    "Item Name": "TEACHERS HIGHLAND 180",
    "SellingPrice": 787
  }, {
    "Item Name": "TEACHERS HIGHLAND 60",
    "SellingPrice": 258
  }, {
    "Item Name": "TEACHERS HIGHLAND 30",
    "SellingPrice": 135
  }, {
    "Item Name": "TEACHERS 50 60",
    "SellingPrice": 393
  }, {
    "Item Name": "TEACHERS 50 30",
    "SellingPrice": 202
  }, {
    "Item Name": "BLACK DOG TRIPPLE GOLD 180",
    "SellingPrice": 121
  }, {
    "Item Name": "BLACK DOG TRIPPLE GOLD 30",
    "SellingPrice": 213
  }, {
    "Item Name": "BLACK DOG 8 YEARS 180",
    "SellingPrice": 731
  }, {
    "Item Name": "BLACK DOG 8 YEARS 60",
    "SellingPrice": 247
  }, {
    "Item Name": "BLACK DOG 8 YEARS 30",
    "SellingPrice": 123
  }, {
    "Item Name": "BLENDERS PRIDE 750",
    "SellingPrice": 228
  }, {
    "Item Name": "BLENDERS PRIDE 375",
    "SellingPrice": 114
  }, {
    "Item Name": "BLENDERS PRIDE 180",
    "SellingPrice": 573
  }, {
    "Item Name": "BLENDERS PRIDE 60",
    "SellingPrice": 191
  }, {
    "Item Name": "BLENDERS PRIDE 30",
    "SellingPrice": 90
  }, {
    "Item Name": "SIGNATURE 180",
    "SellingPrice": 450
  }, {
    "Item Name": "SIGNATURE 60",
    "SellingPrice": 168
  }, {
    "Item Name": "SIGNATURE 30",
    "SellingPrice": 90
  }, {
    "Item Name": "GREY GOOSE 750",
    "SellingPrice": 819
  }, {
    "Item Name": "GREY GOOSE 30",
    "SellingPrice": 326
  }, {
    "Item Name": "BELVEDERE 700",
    "SellingPrice": 812
  }, {
    "Item Name": "BELVEDERE 30",
    "SellingPrice": 360
  }, {
    "Item Name": "CIROC 750",
    "SellingPrice": 742
  }, {
    "Item Name": "CIROC 30",
    "SellingPrice": 303
  }, {
    "Item Name": "ABSOLUT 750",
    "SellingPrice": 455
  }, {
    "Item Name": "ABSOLUT 30",
    "SellingPrice": 191
  }, {
    "Item Name": "SMIRNOFF RED 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF RED 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMIRNOFF RED30",
    "SellingPrice": 101
  }, {
    "Item Name": "SMIRNOFF ORANGE 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF ORANGE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMINOFF ORANGE30",
    "SellingPrice": 101
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE 180",
    "SellingPrice": 551
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE30",
    "SellingPrice": 101
  }, {
    "Item Name": "BOMBAY SAPHIRE 750",
    "SellingPrice": 472
  }, {
    "Item Name": "BOMBAY SAPHIRE 30",
    "SellingPrice": 191
  }, {
    "Item Name": "BLUE RIBBAND 750",
    "SellingPrice": 877
  }, {
    "Item Name": "BLUE RIBBAND 60",
    "SellingPrice": 78
  }, {
    "Item Name": "BACCARDI WHITE 750",
    "SellingPrice": 248
  }, {
    "Item Name": "BACCARDI WHITE 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI WHITE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI WHITE 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI LEMON 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI LEMON 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI LEMON 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI ORANGE 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI ORANGE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "BACCARDI LEMON 30",
    "SellingPrice": 101
  }, {
    "Item Name": "BACCARDI BLACK 180",
    "SellingPrice": 393
  }, {
    "Item Name": "BACCARDI BLACK 30",
    "SellingPrice": 67
  }, {
    "Item Name": "BACCARDI GOLD 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI GOLD30",
    "SellingPrice": 101
  }, {
    "Item Name": "OLD MONK 180",
    "SellingPrice": 225
  }, {
    "Item Name": "OLD MONK 90",
    "SellingPrice": 168
  }, {
    "Item Name": "OLD MONK 60",
    "SellingPrice": 90
  }, {
    "Item Name": "OLD MONK 30 ",
    "SellingPrice": 45
  }, {
    "Item Name": "DON ANGEL 750",
    "SellingPrice": 466
  }, {
    "Item Name": "DON ANGEL 30",
    "SellingPrice": 191
  }, {
    "Item Name": "SAUZA SILVER 700",
    "SellingPrice": 615
  }, {
    "Item Name": "SAUZA SILVER 30",
    "SellingPrice": 270
  }, {
    "Item Name": "JAGERBOMB",
    "SellingPrice": 506
  }, {
    "Item Name": "KAMAKAZI",
    "SellingPrice": 168
  }, {
    "Item Name": "JAGERMASTER",
    "SellingPrice": 303
  }, {
    "Item Name": "COINTTRAEU",
    "SellingPrice": 303
  }, {
    "Item Name": "SAMBUCA",
    "SellingPrice": 258
  }, {
    "Item Name": "KHALUA",
    "SellingPrice": 168
  }, {
    "Item Name": "MARTINI BLANCO",
    "SellingPrice": 90
  }, {
    "Item Name": "MARTINI ROSSO",
    "SellingPrice": 90
  }, {
    "Item Name": "HENESSY VS 700",
    "SellingPrice": 787
  }, {
    "Item Name": "HENESSY VS 30",
    "SellingPrice": 348
  }, {
    "Item Name": "MORPHEUS 750",
    "SellingPrice": 218
  }, {
    "Item Name": "MORPHEUS 180",
    "SellingPrice": 540
  }, {
    "Item Name": "MORPHEUS 60",
    "SellingPrice": 191
  }, {
    "Item Name": "MORPHEUS 30",
    "SellingPrice": 101
  }, {
    "Item Name": "MANSION HOUSE 180",
    "SellingPrice": 292
  }, {
    "Item Name": "MANSION HOUSE 90",
    "SellingPrice": 168
  }, {
    "Item Name": "MANSION HOUSE 60",
    "SellingPrice": 90
  }, {
    "Item Name": "MC BRANDY 60",
    "SellingPrice": 90
  }, {
    "Item Name": "RED BULL ",
    "SellingPrice": 157
  }, {
    "Item Name": "COKE",
    "SellingPrice": 45
  }, {
    "Item Name": "SPRITE",
    "SellingPrice": 45
  }, {
    "Item Name": "SODA",
    "SellingPrice": 33
  }, {
    "Item Name": "DIET COKE",
    "SellingPrice": 56
  }, {
    "Item Name": "TONIC WATER",
    "SellingPrice": 67
  }, {
    "Item Name": "GINGER ALE",
    "SellingPrice": 67
  }, {
    "Item Name": "LIME SODA",
    "SellingPrice": 45
  }, {
    "Item Name": "LIME WATER",
    "SellingPrice": 45
  }, {
    "Item Name": "PACKEGED WATER 1L",
    "SellingPrice": 39
  }, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
  }, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
  }, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
  }, {
    "Item Name": "Dhai",
    "SellingPrice": 20
  }, {
    "Item Name": "Rice",
    "SellingPrice": 55
  }, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
  }, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
  }, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
  }, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
  }, {
    "Item Name": "Dhai",
    "SellingPrice": 20
  }, {
    "Item Name": "Rice",
    "SellingPrice": 55
  }, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
  }]

Image内 imageformater

{"A":["CountA1.jpg"]} // when only one is active
{"A":["CountA1.jpg","CountA2.jpg"]} // when two are active these are dynamic

作为我的 myFun在图像之后再次调用，我正在尝试调用 imageFormater以便它也刷新功能以便新数据到来

创意

根据我的代码流程，如果有多个图像，则 UI 将显示为 table-->image1>table-->image2-->table>--image3这是当有三张图像时，所以我想到了上面案例 image3 中的最后一张图像时我应该 location.reload(); .但我无法找到最后一张图片

带有静态 JSON 的片段

$(document).ready(function() {



  var imgLen = 0;
  var cnt = 0;
  var lastImage = false;

  var tableValue = [{
    "Item Name": "MANCHOW  V SOUP",
    "SellingPrice": 100
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "SMIRNOFF GREEN APPLE30",
    "SellingPrice": 101
  }, {
    "Item Name": "BOMBAY SAPHIRE 750",
    "SellingPrice": 472
  }, {
    "Item Name": "BOMBAY SAPHIRE 30",
    "SellingPrice": 191
  }, {
    "Item Name": "BLUE RIBBAND 750",
    "SellingPrice": 877
  }, {
    "Item Name": "BLUE RIBBAND 60",
    "SellingPrice": 78
  }, {
    "Item Name": "BACCARDI WHITE 750",
    "SellingPrice": 248
  }, {
    "Item Name": "BACCARDI WHITE 180",
    "SellingPrice": 585
  }, {
    "Item Name": "BACCARDI WHITE 60",
    "SellingPrice": 202
  }, {
    "Item Name": "OLD MONK 180",
    "SellingPrice": 225
  }, {
    "Item Name": "OLD MONK 90",
    "SellingPrice": 168
  }, {
    "Item Name": "OLD MONK 60",
    "SellingPrice": 90
  }, {
    "Item Name": "OLD MONK 30 ",
    "SellingPrice": 45
  }, {
    "Item Name": "DON ANGEL 750",
    "SellingPrice": 466
  }, {
    "Item Name": "DON ANGEL 30",
    "SellingPrice": 191
  }, {
    "Item Name": "SAUZA SILVER 700",
    "SellingPrice": 615
  }, {
    "Item Name": "SAUZA SILVER 30",
    "SellingPrice": 270
  }, {
    "Item Name": "LIME WATER",
    "SellingPrice": 45
  }, {
    "Item Name": "PACKEGED WATER 1L",
    "SellingPrice": 39
  }, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
  }, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
  }, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
  }, {
    "Item Name": "Dhai",
    "SellingPrice": 20
  }, {
    "Item Name": "Rice",
    "SellingPrice": 55
  }, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
  }, {
    "Item Name": "MANSION HOUSE 650",
    "SellingPrice": 900
  }, {
    "Item Name": "Chole Kulche",
    "SellingPrice": 80
  }, {
    "Item Name": "Butter Nan",
    "SellingPrice": 65
  }, {
    "Item Name": "Dhai",
    "SellingPrice": 20
  }, {
    "Item Name": "Rice",
    "SellingPrice": 55
  }, {
    "Item Name": "Plain rice",
    "SellingPrice": 30
  }];


  interval = '';
  var images = {
    CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
  }
  initTable(tableValue);
  imageFormatter();

  function initTable(tableValue) {
    addTable(tableValue)
    showRows();
    interval = window.setInterval(showRows, 5000); // seting interval to show table in parts
  }




  function hideImage() {
    if (imgLen) {
      var imgno = (cnt % imgLen) + 1; // here counting Image when it is last image want to refresh the oage using location.reload();
      if (imgno == 1 && !lastImage) {
        lastImage = true;
      } else if (imgno == 1 && lastImage) {
        console.log("reload now")
        location.reload();
      }
      console.log(imgno)
      $("#displayImage img").css("display", "none");
      $("#displayImage img:nth-child(" + imgno + ")").css("display", "block")

      $("#displayImage").show(); //show Image and hide table
      $("#DisplayTable").hide();
      setTimeout(function() {
        initTable(tableValue);
      }, 5000);
      cnt++;
    } else {
      initTable(tableValue);
    }

  }





  function showRows() {
    // Any TRs that are not hidden and not already shown get "already-shown" applies
    if ($(".hidden:lt(10)").length > 0) { //checking is it is the last page or not
      $("#displayImage").hide(); //showing table hiding image
      $("#DisplayTable").show();
      $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
    } else {
      $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

      hideImage();

      clearInterval(interval); //if last then clearing time interval and calling the function again 
    }

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

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

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

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

  }



  function imageFormatter() {

    var images = {
      A: ["CountA1.jpg", "CountA2.jpg"]
    } // This data is dynamic so I want to 

    for (var key in images) {

      var imageList = images[key];
      for (i = 0; i < imageList.length; i++) {
        var img = $('<img />').attr({
          'src': 'ImageInCounter/' + key + '/' + imageList[i], // this one is displaying Image one below other
          'alt': key + '/' + imageList[i],
          'width': 90 + "%",
          'height': 680
        }).appendTo('#displayImage');
      }

    }
    imgLen = $("#displayImage img").length;
  }
});

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>

<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">

</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

在我的静态代码中，在 countA2.jpg 图像之后我想重新加载页面

编辑/更新

请查看 @Don'tDownVote 代码 -:

  function hideImage() {
                if(imgLen){
                  var imgno = (cnt % imgLen) + 1;
                  if(imgno == 1 && !lastImage){
                    lastImage = true;
                  }else if(imgno == 1 && lastImage){
                    console.log("reload now") // not entering in this condition
                    location.reload();
                  }
                  console.log(imgno)
                  $("#displayImage img").css("display", "none");
                  $("#displayImage img:nth-child(" + imgno + ")").css("display", "block")

                  $("#displayImage").show();
                  $("#DisplayTable").hide();
                  setTimeout(function() {
                    initTable(tableValue);
                  }, 10000);
                  cnt++;
                 } else{
                  initTable(tableValue);
                 }

              }

它没有进入 else if 条件，我的所有问题都是因为一个接一个地显示多个图像，包括表格，如果只有一个图像，我可以轻松地重新加载我的页面，这里我有表格-->图像1>表格--> image2 在 Image 2 之后我想重新加载。

我正在尝试在上述条件下的最后一页之后重新加载或刷新页面 Image2 .

最佳答案

尝试这个。我添加了在最后一张图像时重新加载的逻辑。

$(document).ready(function() {

      var imgLen = 0;
      var cnt = 0;
      var lastImage = false;

      var tableValue = [{
      "Item Name": "MANCHOW  V SOUP",
      "SellingPrice": 100
    }, {
      "Item Name": "SMIRNOFF GREEN APPLE 60",
      "SellingPrice": 202
    }, {
      "Item Name": "SMIRNOFF GREEN APPLE30",
      "SellingPrice": 101
    }, {
      "Item Name": "BOMBAY SAPHIRE 750",
      "SellingPrice": 472
    }, {
      "Item Name": "BOMBAY SAPHIRE 30",
      "SellingPrice": 191
    }, {
      "Item Name": "BLUE RIBBAND 750",
      "SellingPrice": 877
    }, {
      "Item Name": "BLUE RIBBAND 60",
      "SellingPrice": 78
    }, {
      "Item Name": "BACCARDI WHITE 750",
      "SellingPrice": 248
    }, {
      "Item Name": "BACCARDI WHITE 180",
      "SellingPrice": 585
    }, {
      "Item Name": "BACCARDI WHITE 60",
      "SellingPrice": 202
    }, {
      "Item Name": "OLD MONK 180",
      "SellingPrice": 225
    }, {
      "Item Name": "OLD MONK 90",
      "SellingPrice": 168
    }, {
      "Item Name": "OLD MONK 60",
      "SellingPrice": 90
    }, {
      "Item Name": "OLD MONK 30 ",
      "SellingPrice": 45
    }, {
      "Item Name": "DON ANGEL 750",
      "SellingPrice": 466
    }, {
      "Item Name": "DON ANGEL 30",
      "SellingPrice": 191
    }, {
      "Item Name": "SAUZA SILVER 700",
      "SellingPrice": 615
    }, {
      "Item Name": "SAUZA SILVER 30",
      "SellingPrice": 270
    }, {
      "Item Name": "LIME WATER",
      "SellingPrice": 45
    }, {
      "Item Name": "PACKEGED WATER 1L",
      "SellingPrice": 39
    }, {
      "Item Name": "MANSION HOUSE 650",
      "SellingPrice": 900
    }, {
      "Item Name": "Chole Kulche",
      "SellingPrice": 80
    }, {
      "Item Name": "Butter Nan",
      "SellingPrice": 65
    }, {
      "Item Name": "Dhai",
      "SellingPrice": 20
    }, {
      "Item Name": "Rice",
      "SellingPrice": 55
    }, {
      "Item Name": "Plain rice",
      "SellingPrice": 30
    }, {
      "Item Name": "MANSION HOUSE 650",
      "SellingPrice": 900
    }, {
      "Item Name": "Chole Kulche",
      "SellingPrice": 80
    }, {
      "Item Name": "Butter Nan",
      "SellingPrice": 65
    }, {
      "Item Name": "Dhai",
      "SellingPrice": 20
    }, {
      "Item Name": "Rice",
      "SellingPrice": 55
    }, {
      "Item Name": "Plain rice",
      "SellingPrice": 30
    }];


      interval = '';
      var images = {
        CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
      }
      initTable(tableValue);
      imageFormatter();

      function initTable(tableValue) {
        addTable(tableValue)
        showRows();
        interval = window.setInterval(showRows, 1000); // seting interval to show table in parts
      }




      function hideImage() {
        if(imgLen){
          var imgno = (cnt % imgLen) + 1; // here counting Image when it is last image want to refresh the oage using location.reload();
          console.log(imgLen, imgno);
          if(imgno == imgLen){
            console.log("reload now")
            location.reload();
          }
        //  console.log(imgno)
          $("#displayImage img").css("display", "none");
          $("#displayImage img:nth-child(" + imgno + ")").css("display", "block")

          $("#displayImage").show(); //show Image and hide table
          $("#DisplayTable").hide();
          setTimeout(function() {
            initTable(tableValue);
          }, 5000);
          cnt++;
         } else{
          initTable(tableValue);
         }

      }





      function showRows() {
        // Any TRs that are not hidden and not already shown get "already-shown" applies
        if ($(".hidden:lt(10)").length > 0) { //checking is it is the last page or not
          $("#displayImage").hide(); //showing table hiding image
          $("#DisplayTable").show();
          $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
        } else {
          $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

          hideImage();

          clearInterval(interval); //if last then clearing time interval and calling the function again 
        }

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

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

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

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

      }



      function imageFormatter() {

        var images = {
          CounterA: ["CounterA1.jpg", "CounterA2.jpg"]
        }; // This data is dynamic so I want to 

        for (var key in images) {

          var imageList = images[key];
          for (i = 0; i < imageList.length; i++) {
            var img = $('<img />').attr({
              'src': 'Image/' + key + '/' + imageList[i], // this one is displaying Image one below other
              'alt': key + '/' + imageList[i],
              'width': 90 + "%",
              'height': 680
            }).appendTo('#displayImage');
          }

        }
        imgLen = $("#displayImage img").length;
      }
      });

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>

<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">

</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

关于javascript - 如何在给定时间内重新加载ajax调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56560534/

文章推荐： linux - 在 Linux 上安装 block

文章推荐： javascript - 从用户浏览器历史记录中隐藏网站

文章推荐：安卓证书过期

perl - 给定/当值未定义时
在下面的代码中，我得到一个 uninitialized value警告，但仅限于第二个 given/when例子。为什么是这样？ #!/usr/bin/env perl use warnings; u
perl - 给定/何时的哪些部分是实验性的？
整个“开关”功能是否已成为实验性的？在没有 Perl 的 future 版本破坏我的代码的情况下，我可以依赖其中的某些部分吗？一般来说，将稳定功能更改为实验性的政策是什么？背景use feature
c++ - 条件语句(给定)
有没有办法在一个条件语句中写出如下语句？ a和b不能同时等于5。 (a可以是5，b可以是5，但是a AND b不能是5) 最佳答案正如克里斯指出的那样，您要查找的是逻辑异或，相当于逻辑不等于 !=:
给定 n 条线查找所有线段交点的算法
我正在寻找一种算法来找到给定 n 条线段的所有交点。以下是来自 http://jeffe.cs.illinois.edu/teaching/373/notes/x06-sweepline.pdf 的伪
python - 给定 k 个标记的最大项目
数组中有 N 个元素。我可以选择第一项最多 N 次，第二项最多选择 N-1 次，依此类推。我有 K 个 token 要使用并且需要使用它们以便我可以拥有最大数量的项目。 arr = [3, 4, 8
python - 给定 Spacy 中的引理是否有可能获得单词列表？
我正在尝试修复法语文本中的语法性别，想知道是否有办法从某个词条中获取所有单词的列表，以及是否可以在此类列表中进行查找？最佳答案尝试: import spacy lemma_lookup = spa
winapi - 给定 HWND，如何从所有者绘制的窗口中提取文本信息？
我正在为 Win32 编写一个简单的自动化测试应用程序。它作为一个单独的进程运行，并通过 Windows API 访问目标应用程序。我可以阅读窗口层次结构，查找标签和文本框，并通过发送/发布消息等来单
javascript - 给定 JSON 中的第一行是什么？
在 nodeJs 中使用 Sequelize 时，我从 Sequelize 收到此错误，如下所示: { [SequelizeUniqueConstraintError: Validation erro
python - 给定 CNN 的回归激活映射
本文https://arxiv.org/pdf/1703.10757.pdf使用回归激活映射 (RAM) - 而不是类激活映射 (CAM) 来解决问题。有几篇文章描述了如何实现 CAM。但是我找不到
ios - 给定 mach_header 我如何找到二进制图像名称？
我正在研究 Mach 动态链接器 dyld。这个问题适用于所有 Apple 平台，但很高兴得到特定于平台的答案；我正在使用 ObjC，但如果对你有用的话，我也很乐意翻译 Swift。 The rele
instagram - 给定 user_id，如何找到用户名？
我有一个包含数千个 Instagram 用户 ID 的列表。我如何获得他们的 Instagram 用户名/句柄？最佳答案你必须使用这个 Instagram API: https://api.ins
scala - 给定 Elasticsearch 无效模式
我在下面的代码: def main(args: Array[String]) { val sparkConf = new SparkConf().setAppName("Spark-Hbase").s
excel - 给定 2 个日期时查找单元格范围
我有一个表格，其中包含从 1 到 10 的数字。(从 D2 到 M2) 假设A1中有03/09/2019 并且在B1中有06/09/2019 并且在C1中有Hello 在A 列中，我有多个系列的单词，
java - 给定 URI 的注释检索
我想在给定服务对应的 URI 的情况下检索服务的注释(特别是 @RolesAllowed )。这是一个例子: 服务: @GET @Path("/example") @RolesAllowed({ "B
oracle - 给定 JDBC 连接上的并发查询？
我看到 OraclePreparedStatementexecuteQuery() 表现出序列化。也就是说，我想使用相同的连接对 Oracle 数据库同时运行两个查询。然而，OraclePrepare
java - 给定 k，使用递归求几何和
import java.util.Scanner; public class GeometricSumFromK { public static int geometricSum(int k,
java - 给定 HttpServletRequest 的网页服务的良好模式是什么？
我创建了一个抽象基类Page，它说明了如何构建动态网页。我正在尝试想出一种基于作为 HttpServletRequest 传入的 GET 请求生成 Page 的好方法。例如... public cla
java - 给定 SMS 字符串的正则表达式是什么
我的字符串是一条短信，采用以下两种格式之一: 潜在客户短信: 您已收到 1 条线索标题:我的领导潜在客户 ID:12345-2365 警报设置 ID:890 短信回复: 您已收到 1 条回复标题
python - 给定 python 中的字符串列表
我在 python 中有以下代码: class CreateMap: def changeme(listOne, lisrTwo, listThree, listFour, listfive):
java - 给定 id 的多个实体的高效缓存感知获取
这是在 Hibernate 上运行的 JPA2。我想检索相同实体类型的多个实例，给定它们的 ID。其中许多已经在持久性上下文和/或二级缓存中。我尝试了几种方法，但似乎都有其缺点: 当我使用 ent

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在给定时间内重新加载ajax调用函数