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

Question

假设有一个函数正在执行一些复杂/长时间运行的操作:

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

(这个函数实际上只是返回作为参数传递的值)

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

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其中还包含上述内容的异步实现。

Answer 1

Does it make sense to execute functions in event handlers async?

处于事件处理程序中并不是使代码异步的理由。

Let's say there is a function which is doing some complex/long running stuff

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

See this codesandbox which also contains an async implementation of the above.

这与异步无关。它被封装在 Promise(这是管理异步代码的工具)中，但它仍然是阻塞的。