带有递归和setTimeout的Promise

Question

我正在尝试创建一个函数来等待 HTML 中的 DOM 元素。 我想每 2 秒检查一次元素是否存在，并且当元素出现时返回一个 Promise 以使用“then”消耗响应。

这是我的代码：

function checkElement(){
    console.log("Check Element...")

    if( jQuery('#idOfElement').length > 0 ){        
        return new Promise( (resolve, reject) => {
            resolve()
        })
    }
    else{
           //retry after 2 seconds
           setTimeout( () => {
            checkElement()
           },2000) 
    }
}

这段代码的问题是“then”永远不会被执行。

checkElement().then( ()=> console.log("Element Found"))

如何修改代码来使用 Promise？ 谢谢

Answer 1

您可以在 setTimeout 内返回递归调用 checkElement() 的结果。

当未找到该元素时，它会返回一个承诺，该承诺将在 2 秒延迟后解决。它在 setTimeout 内递归调用 checkElement，并在找到元素后解析 Promise。这允许您在找到元素时使用 .then 执行代码。

function checkElement() {
    console.log("Check Element...")

    if (jQuery('#idOfElement').length > 0) {
        return Promise.resolve(); // Return a resolved promise
    } else {
        // Retry after 2 seconds
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                checkElement().then(resolve); // Recursively call and resolve the promise when the element is found
            }, 2000);
        });
    }
}

checkElement().then(() => console.log("Element Found"))