Lassen Sie Javascript warten, bis ein HTML-Element existiert

Question

Ich versuche, einen Bot zu machen, der virtuelle Währung an einen anderen Benutzer sendet. Ich lasse den Bot durch eine Datenbank nach Benutzern suchen. Vor der Suche hat das innere HTML einer Abteilung überhaupt keine Elemente. Nach der Suche wird diese mit mehreren Benutzerlinks gefüllt.

Weil es eine kurze Weile dauert, bis Ergebnisse angezeigt werden, brauche ich Javascript, um darauf zu warten, dass mindestens ein Anchor-Tag existiert. Wie kann ich das machen?

Answer 1

Es gibt viele, viele bessere Möglichkeiten, dies zu tun, stammen alle aus tatsächlich überprüft, wenn die AJAX-Daten das Element selbst auffüllt, aber folgendes funktioniert:

var t = setInterval(function() { 
    if ($("element").children().length > 0) { 
    clearInterval(t); 
    // do stuff 
    } 
}, 50); 

Answer 2

Mit setTimeout() zu verzögern Der Code ein paar Sekunden ist riskant, da es bei älteren Browsern/Maschinen länger dauern kann als erwartet.

Verwenden Sie stattdessen promise(), Sie finden die Dokumentation https://api.jquery.com/promise/.

Answer 3

Mit dem Onload-Ereignis können Sie onload mit dem Tag a verwenden. EX: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_onload

Answer 4

Ich vermute, das ist ein AJAX-Anruf.

Sie könnten AJAX callback verwenden, um zu überprüfen, ob Sie Ergebnisse vom Server erhalten haben.

Etwas wie folgt aus:

var tags_available = false; 
$.ajax({ 
    ... the ajax stuff; 
}).done(function(data){ // The callback 
    if(data || $('#tags_element').lenght != 0){ 
    tags_available = true; 
    }else{ 
    tags_available = false; 
    } 
}) 

Dann:

if(tags_available){ 
    console.log("Tags available") 
} 

Answer 5

Wenn ich habe Sie richtig verstanden Sie müssen überprüfen, ob dom Element wurden aktualisiert/mit neuen Elementen bestückt. Es gibt ein paar Möglichkeiten, wie Sie das erreichen können:

1.) Mit window.setTimeout Funktion

function checkForChanges() { 
 
    var observeThis = document.getElementById('observethis'); 
 
    if (observeThis.hasChildNodes()) { 
 
    alert('yes'); 
 
    return; 
 
    /*this is gonna execute only once */ 
 
    } 
 
    window.setTimeout(function() { 
 
    checkForChanges(); 
 
    }, 25); 
 
} 
 

 
checkForChanges(); 
 

 
/* this part is only relevant for demonstration. 
 
It shows what happens when dom element gets new child */ 
 
(function() { 
 
    var observeThis = document.getElementById('observethis'); 
 
    var button = document.getElementById('button-append'); 
 
    button.addEventListener('click', function() { 
 
    var anchorElement = document.createElement('a'); 
 
    anchorElement.href = "http://example.com"; 
 
    anchorElement.target = "_blank"; 
 
    anchorElement.innerHTML = "Link"; 
 
    observeThis.appendChild(anchorElement); 
 
    }, false); 
 
})();

<div id="observethis"></div> 
 
<button id="button-append">append anchor</button>

2.) MutationObserver Klasse

dieses moderne Ansatz (I würde auch empfehlen, eins).

function checkForChanges() { 
 
    var observeThis = document.getElementById('observethis'); 
 
    // create an observer instance 
 
    var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
     if (mutation.type === 'childList') { 
 
     alert("insert your own code"); 
 
     } 
 
    }); 
 
    }); 
 
    var config = { 
 
    attributes: true, 
 
    childList: true, 
 
    characterData: true 
 
    }; 
 
    observer.observe(observeThis, config); 
 
    //observer.disconnect(); 
 
    //use observer.disconnect to end observations 
 
} 
 

 
checkForChanges(); 
 

 
/* this part is only relevant for demonstration. 
 
It shows what happens when dom element gets new child */ 
 
(function() { 
 
    var observeThis = document.getElementById('observethis'); 
 
    var button = document.getElementById('button-append'); 
 
    button.addEventListener('click', function() { 
 
    var anchorElement = document.createElement('a'); 
 
    anchorElement.href = "http://example.com"; 
 
    anchorElement.target = "_blank"; 
 
    anchorElement.innerHTML = "Link"; 
 
    observeThis.appendChild(anchorElement); 
 
    }, false); 
 
})();

<div id="observethis"></div> 
 
<button id="button-append">Append Child</button>

Lesen Sie mehr über MutationObserver here

3.) Wenn Sie nur warten auf eine Antwort von Ajax-Rückruf zu bekommen und eigentlich nicht brauchen Änderungen in dom zu beobachten, dann nur XMLHttpRequest verwenden. Oder noch besser. Verwenden Sie neue Javascript fetch API (Sie sind Gonna Notwendigkeit polyfill zu gewährleisten, ist es in den meisten Browsern)