如何在 React.js 中创建 sleep 函数

在 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('zadmei.com');
  };

  useEffect(() => {
    async function fetchData() {
      console.log('火焰兔');

      await sleep(1000);

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

    fetchData();
  });

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

export default App;

如何在 React.js 中创建 sleep 函数

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

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

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

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

const handleClick = async event => {
  console.log('火焰兔');

  await sleep(1000);

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

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

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

useEffect(() => {
  async function fetchData() {
    console.log('火焰兔');

    await sleep(1000);

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

  fetchData();
});

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