返回子函数 addEventListener 值作为异步父函数返回答案

【问题标题】：return child function addEventListener value as async parent function return返回子函数 addEventListener 值作为异步父函数返回
【发布时间】：2021-10-02 15:14:40
【问题描述】：

我有一个异步调用，在一个 addEventListener 函数中，我需要将 addEventListener 输出作为父异步调用的输出传递

父异步调用必须等到 addEventListener 函数返回值。

async abc () {
    let result;
    await someObj.addEventListener("click", function(e){
        let childres;
        some_function(someVar)
    }
    e.data = result; )
    return result;
}

【问题讨论】：

x.addEventListener 不是异步的（所以不要await 它），它只是分配一个函数来充当某种事件处理程序。您希望单击异步时会发生什么吗？ x.addEventListener("click", async function (e) { ... });
@james 它不工作异步我添加，你能帮我处理代码块或任何参考
我帮不上忙，因为我不知道当您单击该按钮时您希望result 发生什么。您不能“返回结果”，因为从单击处理程序返回值什么都不做。
请阅读How to Ask，了解如何提出不常被否决和关闭的问题。
async abc () {let result; someObj.addEventListener("click",async function(e){ let _result; childres; some_function(someVar)} e.obj ="test"; e.obj =_result; return _result; )return result;}

标签： javascript ecmascript-6 promise

【解决方案1】：

您似乎想从addEventListener 返回一些东西。您不能这样做，因为任何returns 都将在侦听器中被调用，而不是在主函数中。但是，您可以在事件侦听器中解析一个 Promise，然后等待该 Promise 被解析以继续执行。这是我设置的一个简单的 async-addEventListener 实现作为示例：

const btn = document.getElementById("my-btn");

function asyncAddEventListener(
  element,
  type,
  listener,
  options = {
    once: true,
  }
) {
  return new Promise((resolve, reject) => {
    const callback = (event) => listener(event, resolve, reject);
    element.addEventListener(type, callback, options);
  });
}

async function main() {
  console.log("main start");
  
  // event listener only triggers once
  const data = await asyncAddEventListener(
    btn,
    "click",
    ({ currentTarget }, resolve) => {
      resolve(currentTarget.getAttribute("data-value"));
    }
  );
  console.log(data);
  
  console.log("main end");
}

main();

&lt;button id="my-btn" data-value="secret data"&gt;Click me!&lt;/button&gt;

【讨论】：