JS事件处理程序:异步函数
JS事件处理程序:异步函数
提问于 2018-05-31 19:30:49
我正在用Cordova构建一个应用程序。在一个页面上，有一个调用异步函数的EventListener。window.addEventListener("load", loadEdit(), false);
该函数如下所示的async function loadEdit(){...}。
在浏览器中测试时，即使函数已完全执行，也会出现以下错误：
TypeError:属性'handleEvent‘不可调用。
但是，如果我将EventListener更改为另一个函数，然后该函数调用异步函数，则似乎没有问题。例如：
window.addEventListener("load", loadPre(), false);
...
function loadPre()
{
loadEdit();
}EventListener?
- Why调用异步函数有什么问题？
- 它没有检测到第二个方法也调用异步函数吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-31 19:39:56
您可以从EventListener调用异步函数。
我看到的第一个问题是，通过将回调函数作为loadEdit()而不是loadEdit或() => loadEdit()包含在window.addEventListener的第二个参数中，可以立即调用该回调函数。你必须给它一个函数作为第二个参数，现在你给了一个Promise或者loadPre()的返回值。
尝试这样做：
window.addEventListener("load", () => loadEdit(), false);
async function loadEdit() {
// do the await things here.
}异步函数返回承诺。因此，如果您想在loadEdit之后做一些事情，请尝试：
window.addEventListener("load", () => {
loadEdit().then(/* callback function here */);
}, false);
async function loadEdit() {
// do the await things here.
}Stack Overflow用户
发布于 2021-10-11 15:50:53
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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50623279
复制相关文章
相似问题