javascript - 添加/下载并执行库后，元素是否在 DOM 中，这是 promise 的方式

Question

想象一下:您正在将脚本动态插入到 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 函数只是一个用 Promise 完成的 setTimeout...

我的用例是:我添加一个 jquery 插件，让它下载、执行并测试元素(由 jQuery 插件创建)是否在 DOM 中，然后显示一个包含生成内容的 div...

Answer 1

any way to improve this function?

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

此外，由于您已经将超时方便地封装在 promise 中，因此根本没有理由使用另一个延迟。您所要做的就是 Promise 链接，这会带来更干净、更实用的递归方法:

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);
        });
}