Возникла проблема с объединением оператора if для запуска ПОСЛЕ загрузки данных файлов. json (если эта функция. json включает элемент location.reload)

Question

Моя страница загружает данные из файла. json и показывает их на странице html. есть также элемент location.reload, который постоянно ищет измененные данные и обновляет их, если файл. json был изменен. См. Экран кода 1

var previous = null;
var current = null;

setInterval(function() {
    $.getJSON('thenumber.json', function(data) {

        var text = `The number = ${data.thenumber}<br>
                     Confirmed = : ${data.confirmed}`

        var pass = `${data.thenumber}`

        var conf = `${data.confirmed}`


        $(".mypanel").html(text);

        $(".passRef").html(pass);

        $(".confirmRef").html(conf);


        current = JSON.stringify();            
        if (previous && current && previous !== current) {
            console.log('refresh');
            location.reload();
        }
        previous = current;
    });                       
}, 2000);

Я также хочу добавить некоторые операторы if, которые должны выполняться только после того, как данные. json будут заполнены на странице html. Это я должен работать (без перезагрузки функция включена) что-то вроде экрана кода 2 (по какой-то причине он не работает сегодня вечером, вздох!).

  $(document).ready(() => {
  function whatever() {

  var what = document.getElementById('confirmRef').innerHTML;

  if (what == 'true' ) {

       console.log ("call button should activate");

  } else if (what == 'false' ) {

        console.log ("false confirmation");

  } else {

        console.log ("confirm says something else!");

  }
    $.getJSON('thenumber.json', function(data) {

            var text = `The number = ${data.thenumber}<br>
                         Confirmed = : ${data.confirmed}`
            var pass = `${data.thenumber}`
            var conf = `${data.confirmed}`

            $(".mypanel").html(text);

            $(".passRef").html(pass);

            $(".confirmRef").html(conf);

       })

    .then(() => whatever());
  };

  });

Проблема в том, что когда я пытаюсь объединить все 3 элемента (экран кода 3), я теряю его где-нибудь вверху, и буду признателен за любую помощь в демонстрации мне с примером кода того, как код должен выглядеть, чтобы исправить проблему.

var previous = null;
var current = null;


$(document).ready(() => {
  function whatever() {

  var what = document.getElementById('confirmRef').innerHTML;

        //console.log (what);

if (what == 'true' ) {

       console.log ("call button should activate");

       //console.log (what);

} else if (what == 'false' ) {

        console.log ("false confirmation");

} else {

        console.log ("confirm says something else!");

  }
  setInterval(function() {
        $.getJSON('thenumber.json', function(data) {

            var text = `The number = ${data.thenumber}<br>
                         Confirmed = : ${data.confirmed}`

            var pass = `${data.thenumber}`

            var conf = `${data.confirmed}`


            $(".mypanel").html(text);

            $(".passRef").html(pass);

            $(".confirmRef").html(conf);


            current = JSON.stringify();            
            if (previous && current && previous !== current) {
                console.log('refresh');
                location.reload();
            }
            previous = current;
        });                       
    }, 2000);
    .then(() => whatever());
});

Спасибо, Марк

Answer 1

В вашем последнем коде вы обертывали функцию whatever() вокруг кода, а ваш then был частью setInterval, попробуйте это

var previous = null;
var current = null;


$(document).ready(() => {
  function whatever() {

  var what = document.getElementById('confirmRef').innerHTML;

        //console.log (what);

if (what == 'true' ) {

       console.log ("call button should activate");

       //console.log (what);

} else if (what == 'false' ) {

        console.log ("false confirmation");

} else {

        console.log ("confirm says something else!");

  }
}
  setInterval(function() {
        $.getJSON('thenumber.json', function(data) {

            var text = `The number = ${data.thenumber}<br>
                         Confirmed = : ${data.confirmed}`

            var pass = `${data.thenumber}`

            var conf = `${data.confirmed}`


            $(".mypanel").html(text);

            $(".passRef").html(pass);

            $(".confirmRef").html(conf);


            current = JSON.stringify();            
            if (previous && current && previous !== current) {
                console.log('refresh');
                location.reload();
            }
            previous = current;
        })       
        .then(() => whatever());

    }, 2000);
});