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. 为什么没有检测到第二种方法也调用了异步函数？

Answer 1

TL&DR：为了使用带有异步函数的回调，您需要在添加监听器中装饰异步函数，并在代码块中使用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
)

Answer 2

您可以从中调用异步函数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.
}