javascript - For 循环中检查元素是否存在 SetInterval

Question

我正在尝试检查在生成仪表之前是否已填充每个元素。仪表值由另一个 API 设置，因此必须等待该值出现。

在 For 循环中进行检查似乎不起作用

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()

上面的结果是无限循环，仅检查单个元素。

如果我使用下面的，它可以工作，但我不会在列表中列出所有 36+ :

完成检查每个元素以确保在创建/更新仪表之前填充值的最佳方法是什么。

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 

测试了我了解到的两个代码后，我应该评估我需要的值是否仍然未定义或有值。 var fval = fvals[0].innerText.replace('%','');

我正在尝试类似的方法，但不起作用:

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

似乎提取一个 waitForElement 函数，该函数将元素选择器作为参数并返回解析找到的元素的 promise 可能非常有帮助。

您可以循环遍历 tds，获取选择器 id 并将其传递给 waitForElement 函数和 .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);
    })
}

注意箭头函数、const 和 Promise 的使用可能并非在所有浏览器中都可接受