异步函数内的非异步函数调用

Question

import { useState } from 'react';

export default function Form() {
  const [text, setText] = useState('');

  function sleep(milliseconds) {
    const start = Date.now();
    while (Date.now() - start < milliseconds) {
    }
  }

  async function handleSubmit(e) {
    sleep(5000);
  }

  function handleTextareaChange(e) {
    setText(e.target.value);
  }

  return (
    <>
      <h2>Test</h2>
      <form onSubmit={handleSubmit}>
        <textarea
          value={text}
          onChange={handleTextareaChange}
        />
        <br />
        <button>
          Submit
        </button>
      </form>
    </>
  );
}

我从 React 文档中编辑了这个组件以使其切中要点。

我正在学习 React 和 JavaScript，并在 React 文档中遇到了异步函数。

在这里，当我提交表单时，我无法编辑它，直到睡眠耗尽，但我的困惑是睡眠（5000）是在异步函数内调用的。

在异步函数中调用函数不会使它们成为非阻塞？ 或者，表单是否也在handleSubmit 上调用await？

我对 JavaScript 和 React 的了解很少，所以我可能没有正确使用术语。

Answer 1

仅仅因为在异步函数内部调用函数，它不会自动使该函数成为非阻塞的。函数本身需要异步或涉及异步操作（例如等待或基于 Promise 的操作）以避免阻塞。

function sleep(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

async function handleSubmit() {
  await sleep(5000); // Non-blocking now because it's asynchronous
  // other logic
}