javascript - 不断检查某物是否存在并做某事

Question

我页面上的内容是通过 AJAX 加载的(这是一个循序渐进的过程)，我需要检查特定的 div 是否存在。

该特定的 div 在点击几下后出现。我不得不提一下，我不知道点击次数。

我如何不断检查 div 是否存在，直到它找到它，以及在它找到它之后做些什么？

稍后编辑:我怎样才能不断检查直到特定的 div 不存在，然后再做一些事情。更确切地说，div 在那里，但在几次 ajax 调用后，它被删除了。

Answer 1

使用设置间隔:

var divCheckingInterval = setInterval(function(){
    // Find it with a selector
    if(document.querySelector("#element")){
        console.log("Found!");
        clearInterval(divCheckingInterval);
        // Do something
    }
}, 500);

当 div 出现时使用 MutationObservers 做某事的更好方法:

var observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        for(var i = 0;i < mutation.addedNodes.length;i++){
            if(mutation.addedNodes[i].id === "the-element"){
                console.log("Found!");
                observer.disconnect();
                // Do something
            }
        }
    });
});
observer.observe(document.querySelector("#parent-of-where-the-div-is-going-to-appear"), {childList: true, subtree: true});

MutationObserver 构造函数中的函数只会在从您指定的元素中添加或删除元素时触发，这对性能更好。