JS事件处理程序：异步函数

Question

我正在使用Cordova构建一个应用程序。 在其中一个页面上，有一个EventListener调用异步函数。window.addEventListener("load", loadEdit(), false);

该函数看起来像这样async function loadEdit(){...}。

当在浏览器中进行测试时，即使函数已完全执行，也会出现以下错误：

TypeError：属性'handleEvent'不可调用。

但是，如果我将EventListener更改为另一个函数，然后再调用异步函数，则似乎没有问题。例如：

window.addEventListener("load", loadPre(), false);
...
function loadPre()
{
  loadEdit();
}

1. 异步函数被 EventListener 调用有什么问题？
2. 为什么它不能检测到第二个方法也调用了异步函数？

- David E.

---

尝试使用 window.addEventListener("load", await loadEdit(), false); - Roland Ruul

尝试使用 window.addEventListener("load", loadPre , false); 以及函数 loadPre(event)。 - Nikola Lukic

Answer 1

你可以从EventListener中调用异步函数。

我看到的第一个问题是，在window.addEventListener的第二个参数中，你立即调用回调函数，将其作为loadEdit()而不是loadEdit或() => loadEdit()。你必须给它一个函数作为第二个参数，现在你正在传递一个Promise或loadPre()的返回值。

尝试这种方式：

window.addEventListener("load", () => loadEdit(), false);

async function loadEdit() {
    // do the await things here.
}

异步函数会返回 Promises。因此，如果您想在 loadEdit 后执行某些操作，请尝试：

window.addEventListener("load", () => {
    loadEdit().then(/* callback function here */);
}, false);

async function loadEdit() {
    // do the await things here.
}

- skovmand

---

如果在 loadEdit 加载后没有必要再执行其他操作，为什么不直接使用 loadEdit 而不是 () => loadEdit()？ - 3142 maple

或者 window.addEventListener("load", async () => { //... 代码 }, false); - MrHIDEn

你必须将一个函数作为第二个参数传递，而你现在传递的是一个 Promise 或 loadPre() 的返回值。这是非常重要的，它使得许多事情联系起来。 - FlyingV

Answer 2

TL&DR: 为了使用异步函数的回调，您需要在Add Listener内部修饰您的async函数，并在代码块中使用await。

async function getStringSize(searchString) {
            return searchString.length;
        }

        txtInput.addEventListener("keyup", async e => {
            const searchString = e.target.value;
            total_length = await getStringSize(searchString);
            if (total_length > 3) {
    
                console.log(searchString);
            }
        }, false);

- FlyingV

---

您的答案应该比得分最高的答案更现代化。 - Timo