Check if element exists SetInterval in For Loop

Question

I'm trying to check if each element has been populated before generated a gauge. The gauge value is being set by another API so having to wait for the value to be present.

Having the check in the For Loop doesn't seem to work

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)
//HERE Doesn't work 

var checkExist = setInterval(function() {
   if ($(checkElem).length) {
      console.log("Exists!");
         nextstep(td)
      clearInterval(checkExist);
  }
}, 100); // check every 100ms   


  }
 console.log('done')
} ;


    refreshGauge()

The above results in an infinite loop checking the element only a single element.

If I use the below it works but I don't to list all 36+ in the list:

What is the best way to accomplish having each element checked to ensure the values populated before creating/updating the gauge.

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)


nextstep(td)


  }
 console.log('done')
} ;  

  var checkExist = setInterval(function() {
     if ($('gauge1').length && $('gauge2').length && $('gauge3').length  && $('gauge4').length) {
        console.log("Exists!");
         refreshGauge()
        clearInterval(checkExist);
    }
  }, 100); // check every 100ms 

After testing the two codes I learned I should be evaluating the if the value I need is still undefined or has a value. var fval = fvals[0].innerText.replace('%','');

I'm trying something like this but not working:

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(fval )
//HERE Doesn't work 

var checkExist = setInterval(function() {
   if (fval.length) {
      console.log("Exists!");
         nextstep(td)
      clearInterval(checkExist);
  }
}, 100); // check every 100ms   


  }
 console.log('done')
} ;


    refreshGauge()

Answer 1

Seems like extracting a waitForElement function which takes an element selector as an argument and returns a promise resolving the found element might be quite helpful.

You can loop through the tds, get the selector id and pass it to the waitForElement function and .then nextstep

function refreshGauge() {
    const table = document.getElementById("mytab1");
    const targetTDs = table.querySelectorAll(".myfindclass2");
    targetTDs.forEach(td => {
        const td = targetTDs[i];
        const fvals = td.querySelectorAll("[id*='calcValue']");
        const selector = "#" + fvals[0].getAttribute("id");
        waitForElement(selector)
            .then(() => nextstep(td))
    })
}
function waitForElement(selector) {
    return new Promise((resolve) => {
        const checkExist = setInterval(function () {
            const elements = $(selector)
            if (elements.length) {
                clearInterval(checkExist);
                resolve(elements[0]);
            }
        }, 100);
    })
}

Note arrow functions, const and Promise usage might not be acceptable in all browsers