javascript - 调用事件后等待事件监听器完成

Question

我见过很多类似的问题，但没有一个能真正回答我的问题。我认为这会很简单，但我想这不是因为 JS 是单线程的。

基本上，我想从通过等待点击特定 html 元素的 eventlistener 插入的 html 元素中提取信息。使用 jQuery 它看起来像这样:

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);
}); 

上述代码的问题在于，#main-text 只存在于之后 .clickme 的特定事件监听器 click-事件被执行。
在我为 result 赋值之前，eventlisteners 不会执行。
我如何等待事件监听器完成？

Answer 1

如果不知道属性更改可能需要多长时间，我会使用 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;
});  

否则一个简单的 setTimeout 就可以解决问题。
只是不要忘记 return true 以保持 channel 打开。