迹忆客 专注技术分享

在 React 中创建 sleep 函数：

1. 定义一个以毫秒数为参数的函数。
2. 该函数应返回一个 Promise，该 Promise 在提供的毫秒数后得到解决。

import {useEffect} from 'react';

const sleep = ms => new Promise(
  resolve => setTimeout(resolve, ms)
);

const App = () => {
  const handleClick = async event => {
    console.log('迹忆客');

    await sleep(1000);

    console.log('jiyik.com');
  };

  useEffect(() => {
    async function fetchData() {
      console.log('迹忆客');

      await sleep(1000);

      console.log('jiyik.com');
    }

    fetchData();
  });

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

export default App;

我们创建了一个 sleep 函数，它在返回之前等待 N 毫秒。

const sleep = ms => new Promise(
  resolve => setTimeout(resolve, ms)
);

该函数将毫秒数作为参数，并使用 setTimeout 方法在解析 Promise 之前等待指定的毫秒数。

该函数返回一个 Promise，因此为了使用它，我们必须在其前面加上 await 关键字或使用 .then() 语法。

我们将 handleClick 函数标记为异步，因此我们可以在其中使用 await 关键字。

const handleClick = async event => {
  console.log('迹忆客');

  await sleep(1000);

  console.log('jiyik.com');
};

函数日志开始到控制台，然后休眠 1 秒，日志结束。

可以在 useEffect 钩子内部使用相同的方法，但我们不能将传递给 useEffect 的函数标记为异步。

useEffect(() => {
  async function fetchData() {
    console.log('迹忆客');

    await sleep(1000);

    console.log('jiyik.com');
  }

  fetchData();
});

异步函数返回一个 Promise 对象，但是 useEffect 钩子只能返回一个清理函数，所以我们必须在 useEffect 中定义我们的异步函数。