如何等待一个元素存在?

我正在Chrome中开发一个扩展，我想知道:当一个元素出现时，最好的方法是什么?使用纯javascript，间隔检查，直到一个元素存在，或jQuery有一些简单的方法来做到这一点?

当前回答

一个返回承诺的解决方案，并允许使用超时(兼容IE 11+)。

对于单个元素(element类型):

"use strict";

function waitUntilElementLoaded(selector) {
    var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    var start = performance.now();
    var now = 0;

    return new Promise(function (resolve, reject) {
        var interval = setInterval(function () {
            var element = document.querySelector(selector);

            if (element instanceof Element) {
                clearInterval(interval);

                resolve();
            }

            now = performance.now();

            if (now - start >= timeout) {
                reject("Could not find the element " + selector + " within " + timeout + " ms");
            }
        }, 100);
    });
}

对于多个元素(类型为NodeList):

"use strict";

function waitUntilElementsLoaded(selector) {
    var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    var start = performance.now();
    var now = 0;

    return new Promise(function (resolve, reject) {
        var interval = setInterval(function () {
            var elements = document.querySelectorAll(selector);

            if (elements instanceof NodeList) {
                clearInterval(interval);

                resolve(elements);
            }

            now = performance.now();

            if (now - start >= timeout) {
                reject("Could not find elements " + selector + " within " + timeout + " ms");
            }
        }, 100);
    });
}

例子:

waitUntilElementLoaded('#message', 800).then(function(element) {
    // element found and available

    element.innerHTML = '...';
}).catch(function() {
    // element not found within 800 milliseconds
});

waitUntilElementsLoaded('.message', 10000).then(function(elements) {
    for(const element of elements) {
        // ....
    }
}).catch(function(error) {
    // elements not found withing 10 seconds
});

既适用于元素列表，也适用于单个元素。

2019-01-10 14:48:05

其他回答

你可以这样做

$('#yourelement').ready(function() {

});

请注意，这只在从服务器请求元素时元素出现在DOM中时才有效。如果元素是通过JavaScript动态添加的，那么它将不起作用，您可能需要查看其他答案。

2011-04-02 18:43:54

由于性能问题，DOMNodeInserted和其他DOM突变事件已被弃用——推荐的方法是使用MutationObserver监视DOM。不过，它只在较新的浏览器中受支持，所以当MutationObserver不可用时，您应该回到DOMNodeInserted上。

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (!mutation.addedNodes) return

    for (let i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      let node = mutation.addedNodes[i]
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

// stop watching using:
observer.disconnect()

2013-05-24 02:07:37

insertionQuery库呢?

insertionQuery使用CSS动画回调附加到指定的选择器，在创建元素时运行回调。此方法允许在创建元素时运行回调，而不仅仅是第一次。

从github:

用非dom事件的方式捕获节点。它使用选择器。它不仅仅是为了更广泛的浏览器支持，在某些方面它可能比DOMMutationObserver更好。为什么? 因为DOM事件会降低浏览器的速度，而insertionQuery不会因为DOM Mutation Observer的浏览器支持比insertionQuery少因为使用insertionQuery，您可以使用选择器过滤DOM更改，而没有性能开销! 广泛的支持! IE10+和其他设备(包括手机)

2014-09-19 12:16:50

你可以试试这个:

const wait_until_element_appear = setInterval(() => {
    if ($(element).length !== 0) {
        // some code
        clearInterval(wait_until_element_appear);
    }
}, 0);

这个办法对我很有效

2020-11-30 18:11:40

下面的observe函数将允许您通过选择器监听元素。

在下面的例子中，2秒过后，.greeting将被插入到.container中。因为我们正在监听这个元素的插入，所以我们可以有一个在插入时触发的回调。

更新

下面是一个实验性的async/await示例。

2021-01-05 20:02:48

如何等待一个元素存在?

推荐文章

最新文章

标签