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

Question

我看过很多类似的问题，但none实际上已经回答了我的问题。我会认为它会很简单，但我想这不是因为 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-事件已执行。
eventlisteners 在我分配 result 其值之前未执行。
我如何等待事件侦听器完成？

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 保持频道畅通。