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

React 3月前 111

在 React 中创建 sleep 函数：

定义一个以毫秒数为参数的函数。
该函数应返回一个 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();
});