[英]jQuery/Javascript: setInterval check if DOM element exists?
[英]Check if element exists SetInterval in For Loop
我正在尝试检查在生成仪表之前是否已填充每个元素。 仪表值由另一个 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()
似乎提取waitForElement
function 它将元素选择器作为参数并返回 promise 解析找到的元素可能会很有帮助。
您可以遍历 tds,获取选择器 ID 并将其传递给waitForElement
function 和.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 的使用可能并非在所有浏览器中都可接受
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.