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

Question

我正在使用 Cordova 构建一个应用程序。在一页上，有一个调用异步函数的事件监听器。

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

函数看起来像这样

async function loadEdit(){...}

。

在浏览器中测试时，即使该函数已完全执行，我也会收到以下错误：

TypeError：属性“handleEvent”不可调用。

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

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

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

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.
}

Answer 2

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