Javascript addEventListener 未执行或存在等待问题答案

【问题标题】：Javascript addEventListener is Not being Executed or is There an await ProblemJavascript addEventListener 未执行或存在等待问题
【发布时间】：2022-12-05 07:22:13
【问题描述】：

我有一个 Chrome 扩展，在初始 HTML 中包含以下 js 代码。

(async() => {
   console.log("Starting wrapper");
   await document.getElementById("start").addEventListener("click",sendStart);
   await document.getElementById("stop").addEventListener("click",sendStop);
   await document.getElementById("config").addEventListener("click",sendConfig);
   let {started} =await chrome.storage.session.get("started");
   if (started===undefined) {
       await chrome.storage.local.set({status:false});
       await chrome.storage.session.set({started:true});
   }
   let run=await chrome.storage.local.get("status");
   if (!run.status || Object.keys(run)==0) {
       document.getElementById("start").disabled=false;
       document.getElementById("stop").disable=true;
       document.getElementById("config").disabled=false;
   }
   else {
       document.getElementById("start").disabled=true;
       document.getElementById("stop").disabled=false;
       document.getElementById("config").disabled=true;
   }
   tmrs_obj= await chrome.storage.local.get("tmrs");
   document.getElementById("tmrs").innerHTML=tmrs_obj.tmrs;
   console.log("wrapper setup complete");
})();

问题是当我点击“开始”按钮时，监听器似乎没有被触发。在控制台中，当我单击“开始”按钮时，我所看到的是：

Starting wrapper
wrapper setup complete

在侦听器中，我有一个 console.log 语句输出侦听器已执行但从未显示。我唯一能想到的是，当我单击“开始”按钮时，侦听器尚未设置。但是，即使我等待单击该按钮，它仍然不会执行侦听器。然而奇怪的是，在尝试 2 或 3 次（每次都退出）后，它终于起作用了。有人可以帮我调试吗？ TIA。

【问题讨论】：

await 只对承诺起作用，addEventListener 不返回承诺

标签： javascript google-chrome-extension addeventlistener async.js

【解决方案1】：

将代码包装在异步函数中的事件侦听器中：

document.getElementById("start").addEventListener("click", async function() {
// Your code 
});

您也可以从事件侦听器中删除 await 关键字，并改用常规的 then 回调

document.getElementById("start").addEventListener("click", function() {
// Your code 
});

【讨论】：