Check if Element value has populated during for loop

Question

I'm trying to loop through a table with the id mytab1 and all the td's with myfindclass2.

The values are being populated by another API so it could take up to a few seconds for the values to be available.

I'm using the setinterval but it doesn't seem to work in a for loop.

When ran it will not wait till the element is populated it just finds the only one populated then continuously runs the nextstep() function as if the clearInterval never worked. And just skips over the elements that are null/''

Is there way to write the setinterval/ check if the element is populated as a function outside of the for loop?

**I'm trying to use the most basic of JS as this will be used in all browsers.

function refreshGauge() {
  var table = document.getElementById("mytab1");
  var targetTDs = table.querySelectorAll(".myfindclass2");
  for (var i = 0; i < targetTDs.length; i++) {
    var td = targetTDs[i];
    var fvals = td.querySelectorAll("[id*='calcValue']");
    var fval = fvals[0].innerText.replace('%', '');
    var checkElem = "#" + fvals[0].getAttribute('id');
    console.log(checkElem + '-' + $(checkElem).length)
    var checkExist = setInterval(function() {
      if (fval === '') {
        console.log("Doesn't Exist Yet!");
        //Update variables to see if updated
        fvals = td.querySelectorAll("[id*='calcValue']");
        fval = fvals[0].innerText.replace('%', '');
      } else {
        //stop interval
        clearInterval(checkExist);
        //perform next function : creates gauge 
        nextstep(td);
      }
    }, 100); // check every 100ms   
  }
  console.log('done')
};

my work around is :

function refreshGauge() {
var table = document.getElementById("mytab1");
var targetTDs = table.querySelectorAll(".myfindclass2");
for (var i = 0; i < targetTDs.length; i++) {
  var td = targetTDs[i];  
  var fvals = td.querySelectorAll("[id*='calcValue']");
  var fval = fvals[0].innerText.replace('%','');  
  var checkElem = "#" + fvals[0].getAttribute('id');  
  console.log(checkElem + '-' + $(checkElem).length)  
  nextstep(td)
  }
 console.log('done')
} ;

var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 10){
        clearInterval(interval);
    }
    refreshGauge()
}, 2000); 

but would like to check when the values populated so I don't have to re-run the function 10+ times