如何在 React 中创建延迟函数

作者

在 React 中创建延迟函数

How to create a Delay function in React

在 React 中创建延迟函数：

  1. 定义一个以毫秒数作为参数的函数。
  2. 在提供的毫秒数后使用该setTimeout方法解析 Promise。
应用程序.js
import {useEffect} from 'react';

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

const App = () => {
  const handleClick = async event => {
    console.log('before');

    await delay(1000);

    console.log('after');
  };

  useEffect(() => {
    async function makeRequest() {
      console.log('before');

      await delay(1000);

      console.log('after');
    }

    makeRequest();
  });

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

export default App;

反应延迟函数

我们创建了一个delay函数，它在解析 Promise 之前等待 N 毫秒。

应用程序.js
const delay = ms => new Promise(
  resolve => setTimeout(resolve, ms)
);

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

该函数返回一个 Promise，因此为了使用它，我们必须返回结果或使用语法。 await.then()

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

应用程序.js
const handleClick = async event => {
  console.log('before');

  await delay(1000);

  console.log('after');
};

该函数记录before到控制台，然后等待1几秒钟并记录
after。

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

应用程序.js
useEffect(() => {
  async function fetchData() {
    console.log('before');

    await delay(1000);

    console.log('after');
  }

  fetchData();
});

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

–

发表评论