等待元素而不使用 Promise (ES5)答案

【问题标题】：Wait for element without using promises (ES5)等待元素而不使用 Promise (ES5)
【发布时间】：2021-10-04 12:17:20
【问题描述】：

最好的方法是：

等待 DOM 元素存在
如果是则返回true？

我必须使用 ES5，它排除了 Promise 和异步。

下面是我正在尝试处理的示例，其中 consoles.log true 在 valueCallBack 中，但不返回 true（找到变量）。

function waitForElement(elementId, callBack){
    var found;
    window.setTimeout(function(){
        var element = document.querySelector(elementId);

        found = true;
        valueCallBack(found)

        if(element) {
            callBack(elementId);
        } else {
            waitForElement(elementId, callBack);
        }
    }, 1000);
}

function valueCallBack(found){
    // console.log("this console logs true", found);
    return found;
};


waitForElement('.select-fare-type-modal:not(.ng-hide)',function(){
    // ELEMENT FOUND AND DO SOMETHING
})

【问题讨论】：

是的，好点，我已经更新了问题，以找出返回 true 的最佳方法（如果确实存在）
“然后返回true”：返回是同步发生的事情。在设计良好的异步模式中，您永远不会尝试现在返回未来的结果。
found = true; valueCallBack(found) 没有意义，为什么设置为true？你从来没有验证它是否被发现......
"需要返回true" 所以返回true而不是返回id.....callBack(true);代码应该和function waitForElement(elementId, callBack){ function check() { if (document.getElementById(elementId)) callBack(true); else window.setTimeout(check, 1); } check(); }一样简单
为什么会有valueCallBack？

标签： javascript dom callback settimeout

【解决方案1】：

您的代码正在设置多个计时器。如果您希望您的函数在特定时间间隔后运行，您可以尝试使用简单的setInterval。找到（存在）您的元素后，您可以使用其 ID 清除相同的间隔。

let clearId = null;
function waitForElement(elementId, callBack){
    var found = false;
    clearId  = window.setInterval(function(){
        var element = document.querySelector(elementId);
  if(element){
   callBack();
}
    }, 1000);
}

let alertTrue = () => {
alert(true);
clearInterval(clearId);
}

waitForElement('#yourElementId',alertTrue );

【讨论】：

嘿@tushar，这真的很有帮助，谢谢！不过我想知道，如果我用return true 替换alert(true)，为什么它不返回true？谢谢。
@ReenaVerma 从回调中返回并没有多大作用。此代码本质上仍然是异步的，因为它稍后完成。