时间戳

首页 > 解决方案 > 在事件处理程序中异步执行函数是否有意义？

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

问题描述

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

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进行异步是否有意义？

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

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

标签： javascriptreactjsasynchronous

解决方案

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

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

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

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

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

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

推荐阅读