Как приостановить setInterval и возобновить, если есть новые данные из базы данных?

Как приостановить setInterval, если все данные из базы данных загружены, и возобновить его при появлении новых данных из базы данных без ручного обновления страницы? Проблема в том, что если я не буду использовать clearinterval(), то он будет продолжать получать данные повторно и заполнять график одними и теми же данными.

<script>

  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: [],
          datasets: [{
              label: '# of Votes',
              data: [],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              y: {
                  beginAtZero: true
              }
          }
      }
  });

  $(document).ready(function(){
    var timer = setInterval(function(){
      var postt = $.ajax({
        type:'GET',
        url: "{% url 'post' %}",
        success: function(response){

          console.log(response.post)
          var count = 0;
          var total = response.post.length
          
          for(var key in response.post)
          {
              myChart.data.labels.push(response.post[key].date);
              myChart.data.datasets.forEach((dataset) => {
              dataset.data.push(response.post[key].number);
              myChart.update();
            });
            
            count++;
            //}
            console.log( myChart.data.labels.length)
            

          }
          console.log(count)
          if(count == total){    // <--- stops the setInterval after all data are loaded.
            clearInterval(timer)
            
          }
          

        },
        error: function(response){
          alert("Error")
        }
      })
      //console.log(postt)
    },1000);
    
  });

  
</script>

Код работает, если я вручную обновляю страницу, но я хочу, чтобы это было в реальном времени. спасибо

Вернуться на верх