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函数，该函数将元素选择器作为参数并返回一个对找到的元素进行解析的诺言，可能会很有帮助。

您可以遍历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用法可能在所有浏览器中都不可接受

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

1 个答案: