Wie kann man warten, bis ein Element vorhanden ist?

Question

Ich arbeite an einer Erweiterung in Chrome, und ich frage mich: Was ist der beste Weg, um herauszufinden, wann ein Element in Existenz kommt? Mit einfachen Javascript, mit einem Intervall, das überprüft, bis ein Element vorhanden ist, oder hat jQuery eine einfache Möglichkeit, dies zu tun?

Answer 1

Wenn Sie wollen, dass die Suche nach einer Weile (Timeout) aufhört, dann funktioniert das folgende jQuery. Es wird nach 10 Sekunden auslaufen. Ich brauchte, um diesen Code zu verwenden, anstatt reine JS, weil ich brauchte, um eine Eingabe über den Namen auswählen und hatte Probleme bei der Umsetzung einige der anderen Lösungen.

 // Wait for element to exist.

    function imageLoaded(el, cb,time) {

        if ($(el).length) {
            // Element is now loaded.

            cb($(el));

            var imageInput =  $('input[name=product\\[image_location\\]]');
            console.log(imageInput);

        } else if(time < 10000) {
            // Repeat every 500ms.
            setTimeout(function() {
               time = time+500;

                imageLoaded(el, cb, time)
            }, 500);
        }
    };

    var time = 500;

    imageLoaded('input[name=product\\[image_location\\]]', function(el) {

     //do stuff here 

     },time);

Answer 2

Ich versuche, Mutationsbeobachter zu vermeiden, wenn ich es verhindern kann, also habe ich mir das hier ausgedacht. Es sieht ähnlich aus wie einige der anderen Antworten oben. Diese Funktion sucht nach dem ersten Element, das innerhalb eines gegebenen DOM-Aufrufs existiert - className ist die erwartete Verwendung, aber es kann auch tagName oder Id akzeptieren. Sie könnten auch ein Argument für einen genauen Index hinzufügen, wenn Sie nach einer bestimmten Anzahl von Elementen mit einem bestimmten Klassennamen oder Tagnamen suchen, die geladen wurden.

    async function waitUntilElementExits(domkey,domquery,maxtime){
        const delay = (ms) => new Promise(res => setTimeout(res, ms));
        for(let i=0; i<maxtime; i=i+200){
            await delay(200);
            let elm = document[domkey](domquery);
            if( (domkey == 'getElementById' && elm) || elm?.[0] ) break;
        }
    }
    // usage
    await waitUntilElementExits('getElementByClassName','some_class_name',10000)

Answer 3

Einfaches Javascript.

cont elementExist = setInterval(() => {
    var elm = document.getElementById("elementId")
    if (elm!=null)
         // call your function here to do something
        clearInterval(elementExist);
    }
}, 100);

Hinweis: Dies wird andere Ausführungen blockieren