Как перезагрузить функцию вызова AJAX в данный момент

У меня была задача, которую я почти выполнил, но я застрял в последней части.

Что я делаю

• У меня есть данные JSON из серверной части, которые я вызываю сразу, затем показываю их как таблицу HTML, но только 10 строк за раз. Если строк больше 10, то они будут отображаться в двух частях: сначала 10, затем через 5 секунд, следующие 10, Вы можете проверить мой фрагмент для этого
• Когда это будет последняя страница таблицы, то, что я делаю, показывает изображение, если изображение одно, то table--> изображение, если имеется более одного изображения, предположим, что там 2 изображения, чем table--> image1 → table--> image2 вот так работает
• Когда цикл завершается как table--> image, я снова вызываю табличную функцию, потому что она будет иметь динамические данные
• Здесь данные изображения также поступают в формате JSON, и они также динамичны, там я сталкиваюсь с проблемой

вопрос

• У меня есть функция imageFormatter() которая имеет данные для изображения в формате JSON
• Эти изображения установлены в моей базе данных как имя столбца IsActive поэтому при вызове этих данных я проверяю это условие в моей базе данных с помощью запроса
• Теперь моя таблица отображается на интерфейсе пользователя, и iamges тоже, но в моей базе данных этот флаг IsActive может быть изменен в любое время с Y на N
• Теперь я пытаюсь сделать так, чтобы функция imageFormatter() обновлялась каждые 5 секунд, чтобы она могла принимать новые данные.
• Чтобы изменить это IsActive меня есть пользовательский интерфейс, который пользователь щелкает по ходу, независимо от того, какое изображение выберет пользователь. Я imageFormatter() его в БД через 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'; return false;">
<div id="DisplayTable"></div>
<div id="displayImage" style="display:none">

</div>