Typescript:如何使用async闭包作为addEventListener回调，同时坚持不滥用承诺规则?<

Question

以下代码按预期工作;它处理click事件，并且只允许在当前事件完成处理后发生后续的click事件。

但是，由于IIEF闭包是async，返回值是Promise<void>，这意味着它打破了no-misused-promises规则，错误为Promise returned in function argument where a void return was expected。删除async不是一个选择，因为它将导致必须删除handleClick()上的await，这将导致在测试时对单击事件进行不适当的节流。

let processingClick = false;
document.getElementById(wikiPageElementId)?.addEventListener('click', async (event) => {
event.preventDefault();
if (!processingClick) {
processingClick = true;
// `await` needed here so that each event is processed synchronously.
// Without `await`, any subsequent click could be processed asynchronously
// while `handleClick()` is running.
await handleClick(event.target);
processingClick = false;
}
});

Answer 1

这里不需要IIFE(或async IIFE) -使用.then或.finally也可以工作。(考虑.finally，因为它将处理成功和失败)

let processingClick = false;
document.getElementById(wikiPageElementId)?.addEventListener('click', (event) => {
event.preventDefault();
if (processingClick) {
return;
}
processingClick = true;
handleClick(event.target)
.finally(() => {
processingClick = false;
});
});

如果你必须使用IIFE，你可以在点击侦听器中声明它。

let processingClick = false;
document.getElementById(wikiPageElementId)?.addEventListener('click', (event) => {
event.preventDefault();
void (async () => {
if (!processingClick) {
processingClick = true;
await handleClick(event.target);
processingClick = false;
}
})();
});

(尽管这可能与您可能拥有的其他检查规则相冲突-no-floating-promises需要void，但您也可能有no-void-这就是为什么更好的方法是完全避免异步生命)