ReactJS 如何创建延迟函数

在本文中，我们将讨论如何在ReactJS中创建延迟函数。编程中的延迟函数允许暂停代码执行，使开发人员能够对时间控制精确掌握。这些函数对于内容显示、动画、同步和管理异步操作等任务至关重要。

以下是我们可以在ReactJS中创建延迟函数的几种方法：

使用setTimeout方法
使用useEffect和async/await

前提条件

介绍React
React Hooks
NPM或NPX

创建React应用的步骤

步骤1： 使用以下命令创建一个React应用

npx create-react-app <<Project-Name>>

步骤2： 在创建完项目文件夹后，使用以下命令导航到该文件夹：

cd  <<Project-Name>>

项目结构:

ReactJS 如何创建延迟函数

在ReactJs中使用setTimeout方法创建延迟函数

setTimeout函数可以在执行特定任务前引入延迟。在这个示例中，我们将创建一个React组件，最初显示一条消息。单击按钮后，等待一秒后将显示另一条消息。

示例：

// App.js 
import React, { useState } from 'react'; 
import './style.css'; // Import the CSS file 
  
function App() { 
    const [showDelayedText, setShowDelayedText] = 
        useState(false); 
  
    const handleClick = () => { 
        setTimeout(() => { 
            setShowDelayedText(true); 
        }, 1000); 
    }; 
  
    return ( 
        <div className="container"> 
            <h1 className="heading"> 
                Geeksforgeeks 
            </h1> 
            <div className="content"> 
                <p className="initialText"> 
                    This is the initial text. 
                </p> 
                <button className="button" 
                        onClick={handleClick}> 
                    Show Text 
                </button> 
                {showDelayedText && ( 
                    <p className="delayedText"> 
                        This text appears after a delay. 
                    </p> 
                )} 
            </div> 
        </div> 
    ); 
} 
  
export default App;

CSS

/* style.css */
.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
} 
  
.heading { 
    font-size: 30px; 
    margin-bottom: 10px; 
    color: green; 
} 
  
.content { 
    margin-top: 10px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 20px; 
} 
  
.initialText { 
    font-size: 18px; 
    color: red; 
} 
  
.button { 
    padding: 15px; 
    font-size: 16px; 
    background-color: #007bff; 
    color: #fff; 
    border: none; 
    cursor: pointer; 
    border-radius: 8px; 
} 
  
.delayedText { 
    text-align: center; 
    font-size: 22px; 
    color: red; 
}

运行应用的步骤： 要打开应用程序，请使用终端，并输入以下命令。

npm start

输出：

ReactJS 如何创建延迟函数

// App.js 
import React, { useState } from 'react'; 
import './style.css'; // Import the CSS file 
  
function App() { 
    const [showDelayedText, setShowDelayedText] =  
        useState(false); 
  
    const delay = async (ms) => { 
        return new Promise((resolve) =>  
            setTimeout(resolve, ms)); 
    }; 
  
    const handleClick = async () => { 
        await delay(2000); 
        setShowDelayedText(true); 
    }; 
  
    return ( 
        <div className="container"> 
            <h1 className="heading"> 
                Geeksforgeeks 
            </h1> 
            <p className="initialText"> 
                This is the initial text. 
            </p> 
            <button className="button" 
                    onClick={handleClick}> 
                Show Delayed Text 
            </button> 
            {showDelayedText && ( 
                <p className="delayedText"> 
                    This text appears after a  
                    delay using async/await. 
                </p> 
            )} 
        </div> 
    ); 
} 
  
export default App;

CSS

/* style.css */
.container { 
  text-align: center; 
  margin-top: 100px; 
} 
  
.initialText { 
  font-size: 18px; 
  margin-bottom: 20px; 
} 
  
.heading { 
  font-size: 30px; 
  margin-bottom: 10px; 
  color: green; 
} 
  
.button { 
  padding: 10px 20px; 
  font-size: 16px; 
  background-color: #007bff; 
  color: #fff; 
  border: none; 
  cursor: pointer; 
  border-radius: 8px; 
} 
  
.delayedText { 
  font-size: 22px; 
  color: green; 
  margin-top: 20px; 
}

输出:

ReactJS 如何创建延迟函数