Attendre la fin de l'événement par les écouteurs d'événement

Question

J'ai vu beaucoup de questions similaires, mais aucune n'a vraiment répondu à mon problème. Je pense que ce serait simple, mais je suppose que ce n'est pas parce que JS est mono-thread.

Fondamentalement, je veux extraire des informations d'un élément html qui est inséré à travers un eventlistener en attente d'un clic sur un élément html spécifique. Avec jQuery, il ressemble à ceci:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendBack) { 
     $(".clickme").click(); // Invoke 
     var result = $("#main-text").attr("src"); // Exists only when ".clickme" was clicked 
     sendBack(result); 
}); 

Le problème avec le code précédent est que #main-text n'existe que après un événement spécifique-auditeur de .clickme de click -event a été exécuté.
Et les eventlisteners ne sont pas exécutés avant d'affecter result sa valeur.
Comment attendre que l'écouteur d'événement se termine?

Answer 1

Si on ne sait pas combien de temps cela peut prendre pour l'attribut changer, j'utiliser MutationObserver:

chrome.runtime.onMessage.addListener(function(request, sender, sendBack) { 
    $(".clickme").click(); 

    var target = $("#main-text")[0]; 
    new MutationObserver(function(mutations, observer) { 
    if (target.src) { 
     sendBack(target.src); 
     observer.disconnect(); 
    } 
    }).observe(target, { 
    attributes: true, 
    attributeFilter: ['src'], 
    }); 

    // keep the message channel open while waiting 
    return true; 
}); 

Sinon simple setTimeout pourrait faire l'affaire. N'oubliez pas return true pour garder le canal ouvert.