在事件处理程序中异步执行函数是否有意义？答案

【问题标题】：Does it make sense to execute functions in event handlers async?在事件处理程序中异步执行函数是否有意义？
【发布时间】：2020-02-06 18:54:40
【问题描述】：

假设有一个函数正在做一些复杂/长时间运行的事情：

const somethingMoreComplexSync = value => {
  let stupidString = value;
  for (let i = 0; i < 100000000; i++) {
    stupidString = i % 2 === 0 ? stupidString + "1" : stupidString.slice(0, -1);
  }
  return stupidString;
};

（这个函数实际上只是返回作为参数传递的value）

现在假设您想在输入字段中键入内容后调用此函数：

const MyComponentSync = () => {
  const handleChange = e => {
    const complexValue = somethingMoreComplexSync(e.target.value);
    console.log(complexValue);
  };

  return (
    <label>
      Sync
      <input onChange={handleChange} />
    </label>
  );
};

所以每次输入一个字符onChange都会被触发，因此somethingMoreComplexSync也会被触发。

这里的问题是：使somethingMoreComplexSync异步有什么意义吗？

据我所知，事件无论如何都被称为异步？（这是真的吗？）

请参阅此codesandbox，其中还包含上述的异步实现。

【问题讨论】：

宁可使用 debounce 而不是触发多个更改。
@ysfaran 正如您所说，事件是异步调用的，因此使您的复杂函数异步不会为您节省任何时间，因为它是由另一个线程执行的。
@Jai 这只是一个例子。该事件也可能是onBlur，因此在这种情况下，去抖动不会有帮助。 @robinvrd 不是 javascript 单线程吗？如果你看一下这个例子，无论你在哪里输入东西，它仍然会阻塞 UI。这也让我感到困惑。

标签： javascript reactjs asynchronous

【解决方案1】：

在事件处理程序中异步执行函数有意义吗？

在事件处理程序中没有理由使代码异步。

假设有一个函数正在做一些复杂/长时间运行的事情

然后将其正在执行的工作分配给 Web Worker 或类似的工作以减轻主事件循环的负载可能是明智的……因为它运行时间很长，而不是因为它与事件有任何关系。

查看此代码框，其中还包含上述的异步实现。

这没有什么异步的。它包含在 Promise 中（它们是管理异步代码的工具），但它仍然处于阻塞状态。

【讨论】：

@ysfaran — 引用：“将正在做的工作分给 Web Worker”
那么 JS 中的异步函数有什么意义呢？它仅与 API 调用或加载文件等相关吗？我真的很困惑。在我的情况下，它实际上是关于输入验证，我不想让我的验证有机会阻止用户界面（例如，阻止用户输入）
"那么 JS 中的异步函数有什么意义呢？" — 您是在询问本质上异步的函数还是在询问 async 关键字？
在 Promise 中包装非异步阻塞代码是没有意义的。它可能用于将阻塞代码移动到网络工作者（以及允许使用新数据重新启动进程的接口），并围绕它包装一个承诺。
“什么时候因为 UI 阻塞而编写异步函数才有意义？” - 绝不。使用async 不会阻止函数被阻塞。它只是将它包装在一个承诺中。