typescript - Jsdom 如何“轮询特定元素的存在”?
问题描述
在 jsdom 文档https://github.com/jsdom/jsdom中,在异步脚本加载下,建议轮询特定元素的存在作为确保 dom 加载所需内容的方法。
下面的代码是我这样做的解释:
const elementOnPage = (arg: HTMLElement | null): HTMLElement => {
let tried = arg;
while (tried === null) {
// debugger;
console.log("nothing yet");
tried = arg;
}
return tried;
};
然后像这样调用函数:
...
await elementOnPage(
dom.window.document.querySelector("#some element that I know will eventually be loaded onto the page")
);
...
尽管我知道这个元素最终会被加载,但这会导致无限循环。似乎该参数第一次可能被评估为 null ,然后每次都设置为 null ,但我不确定。无论如何,我也尝试过使用
dom.window.document.getElementsByClassName("some class that will eventually have member elements")
并检查结果集合长度是否不为 0,但这会返回相同的无限循环。我不认为 dom 选择器方法是问题所在。那么,是什么导致了这个无限循环,和/或有没有更好的方法来轮询一个元素?
解决方案
这里有几个误解:
调用
elementOnPage(querySelector(...))
执行一次(除非代码本身在某个循环或事件处理程序中)。如果 DOM 元素在执行时存在,它会立即返回,否则它将永远不会再次执行选择器,因此您的函数将使用null
给定的参数无休止地运行。在 JavaScript 中,像这样的循环
while
是阻塞的(不包括这里不相关的工作人员),所以你基本上是在锁定线程。即使您querySelector
在循环内部重新运行 from ,也会导致无限循环。
要在不阻塞 JS 执行的情况下执行轮询,您可以使用setInterval
或setTimeout
.
此外,一个可等待的函数应该返回一个Promise
(从技术上讲,你可以await
做任何事情,但一个承诺是你让它有用的方法)。
这是一个未经测试的示例:
const elementOnPage = (query: string, timeout: number = 10000): Promise<HTMLElement | null> => {
return new Promise((resolve, reject) => {
const startTime = Date.now();
const tryQuery = () => {
const elem = dom.window.document.querySelector(query);
if (elem) resolve(elem); // Found the element
else if (Date.now() - startTime > timeout) resolve(null); // Give up eventually
else setTimeout(tryQuery, 10); // check again every 10ms
}
tryQuery(); // Initial check
});
};
// Elsewhere:
const elem = await elementOnPage("#some_element");