如何在事件处理程序中进行安全的异步操作，防止不一致？

Question

（我不认为这是How do I make asynchronous call in an event handler的重复，即使标题相似。它也不同于关于禁用按钮的问题，因为可能有很多不同的事件会导致异步冲突。）当访问我的网页时，单击按钮或按下某个键时，我希望能够执行异步 Promise 链，例如读取数据库、读取文件或写入日志条目。但是这些需要离开事件处理程序/侦听器，因此似乎不可能在“then”链的末尾从原始处理程序返回值。这没问题，但是从处理程序同步（即立即）返回的问题是用户可能会单击同一个按钮或再次按下该键，甚至执行不相关的操作，这可能会触发冲突的异步操作（假设这些操作不能并行完成）。我想我想在异步操作正在进行时“关闭”事件系统（可能会在意外终止失败的情况下超时），但这感觉很危险。这肯定不是正确的做法。

Answer 1

我发现处理这个问题的唯一方法是明显地（并且明确地）禁用交互。

一种方法是在所有内容前面放置一个整页半透明模态 div，以防止进一步的用户事件启动可能干扰任何正在进行的后台活动的新进程。

如果您的应用程序足够小以至于只有少数元素可能会触发新进程，那么显式禁用所有这些可能就足够了。

Answer 2

我做这样的事情（假设jquery）

$button.on('click', async function() {

    $(this).prop('disabled', true);

    try {

        // async handling here

        await asyncFunction();

    } catch(e) {

    } finally {

        $(this).prop('disabled', false);

    }

})

除了设置禁用之外，您还可以选择设置一个更多按钮观察者可以知道的变量，以便在您等待时更好地控制允许或不允许运行的内容。

或者设置一个阻止所有内容的整页加载模式。

或者甚至将指针事件设置为无，并通过 css 使光标成为加载光标。