在jsdom docs 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
作为参数给出无限运行。while
这样的循环是阻塞的(不包括这里不相关的工人),所以你基本上是锁定线程。即使你从循环内部重新运行querySelector
,也会导致无限循环。要在不阻止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");