在一个库被添加/下载并以承诺的方式执行后，是DOM中的元素

Is Element in DOM after a lib is added / downloaded and executed, the promise way

本文关键字：执行 方式 承诺 元素 DOM 一个 下载 添加      更新时间：2023-09-26

想象一下:您正在向DOM动态插入一个脚本并执行它。这个脚本可能会插入一些DOM节点。没有办法查明这个特定的元素是否被添加到DOM中。请看下面的代码:

功能:

testIfElemIsInDom : function(elem){
    return $.Deferred(function(def){
        // TEST MAX 20 TIMES IF THE ELEM IS IN THE DOM
        var maxTryes=20,
            actTryes=0;
        // ANOYNMOUS FUNCTION TO CALL IT SELF
        (function _find(){
            // IS ELEM IN THE DOME AND DID WE REACHED MAX TRYES?
            if ($(elem).length===0 && actTryes<=maxTryes){
                ysHelper.wait("100").then(function(){
                    actTryes++;
                    _find(elem);
                });
            }else{
                // IF THE ELEM IS IN THE DOM AND MAX TRYES ARE NOT REACHED - RESOLVE THE DEFERRER
                if (actTryes<maxTryes) {
                    def.resolve();
                }else{
                    return false;
                }
            }   
        }());
    });
}

函数调用:

ysHelper.testIfElemIsInDom("div#element").then(function(){
// do stuff
});

你认为有什么方法可以改进这个功能吗?我真的不喜欢20次尝试的事情，但是如果其他人做错了，函数就不能无休止地运行…

ysHelper。wait函数只是一个setTimeout，用promise完成…

用例对我来说是:我添加了一个jquery插件，让它下载，执行和测试如果元素(这是由jquery插件创建的)是在DOM中，然后显示一个div与生成的内容…

有什么方法可以改进这个函数吗?

return false在异步函数中没有任何意义。相反，你应该拒绝这个承诺。

同样，既然你已经习惯地将超时包装在承诺中，那么就没有理由再使用另一个延迟的超时。你所要做的就是承诺链接，这将导致一个更简洁、更实用、递归的方法:

testIfElemIsInDom: function(sel, maxTries) {
    if (typeof maxTries != "number") maxTries = 20;
    var elem = $(sel);
    if (elem.length)
        return $.when(elem);
    else if (maxTries <= 0)
        return $.Deferred().reject(sel+" was not found");
    else
        return ysHelper.wait("100").then(function() {
            return ysHelper.testIfElemIsInDom(sel, maxTries-1);
        });
}
相关文章：