javascript - 在 For 循环中检查元素是否存在 SetInterval
问题描述
我正在尝试检查在生成仪表之前是否已填充每个元素。仪表值由另一个 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
将元素选择器作为参数并返回解析找到元素的承诺的函数可能会很有帮助。
您可以遍历 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 的使用可能并非在所有浏览器中都可接受
推荐阅读
- javascript - 在多个组件上相同的模型/数据
- linux - 如何从 Windows 上的 Linux 子系统打开 VS Code IDE?
- java - 如何在中断之前检查数组中的每个元素
- javascript - 如何修剪画布中图形周围的白色像素?
- mysql - Connecting to an AWS MySQL Database from Scala with Slick
- javascript - 按钮单击呈现多个不需要的组件 React
- r - Column manipulation in R - matching correct names
- oracle - PL/SQL 触发器不会运行
- java - Does MyBatis follows JPA?
- apache - 浏览器的Linux目录快捷方式路径