如何在React.js中添加延迟？

Question

我刚接触React.js，不确定如何在React.js中添加delay。添加延迟的最佳方法是什么。

我正在尝试将以下代码添加到渲染中，但它没有起作用。

setTimeout(function() {
   
}, 1000);

- shubham agrawal

---

https://dev59.com/El0a5IYBdhLWcg3wAEs3 - Saurabh Agrawal

也许你可以描述一下你想要解决的问题，因为在JavaScript中，延迟几乎总是错误的方法。 - Ricky Nelson

Answer 1

纯 TypeScript 解决方案

您可以使用 async 创建延迟函数：

function timeout(delay: number) {
    return new Promise( res => setTimeout(res, delay) );
}

然后调用该函数：

await timeout(1000); //for 1 sec delay

- Ronit Roy

---

这应该是默认 JavaScript 的一部分。 - Joe Torres

这很棒，如果你通过将function timeout(delay: number) {改为function timeout(delay) {来删除: number，那么它就成为了JavaScript解决方案而不是TypeScript解决方案。 - Icemanind

这将阻止您的组件渲染，而这个不会。我不建议使用这种方法。Alan的答案更好。 - Liam

Answer 2

不确定为什么你想这样做，但是可以像这样实现：

组件的构造函数：

constructor(props) {
    super(props);
    this.state = {
        render: false //Set render state to false
    }
}

在组件挂载时：

componentDidMount() {
  setTimeout(function() { //Start the timer
      this.setState({render: true}) //After 1 second, set render to true
  }.bind(this), 1000)
}

渲染方法：

渲染方法：

render() {
    let renderContainer = false //By default don't render anything
    if(this.state.render) { //If this.state.render == true, which is set to true by the timer.
        renderContainer = <div>Look at me! I'm content!</div> //Add dom elements
    }
    return (
      renderContainer //Render the dom elements, or, when this.state == false, nothing.
    )
  }

当定时器触发时，渲染被设置为true。由于渲染存储在 state 中，这也会触发组件的重新渲染。这个 if 语句简单地指示 renderContainer 在状态为 true 时才显示内容。你还可以通过在顶部声明默认值为 renderContainer=<div>正在加载组件...</div> 来显示指示组件正在加载的文本。

- Rob van Dijk

---

测试快速执行的API与慢速UX之间的性能差异总是一个不错的选择。您不希望通过开发工具来限制测试的连接，因为您不是在测试应用程序在设备上弹出并执行操作的速度，而是在测试API变慢时会发生什么以及最终用户如何处理它。 - zuckerburg

你不相信这个解决方案会自动清除由setTimeout()设置的计时器吗？这样做不会导致内存泄漏吗？ - codeful.element

@codeful.element setTimeout() 只会触发一次函数，不需要被清除。使用 setInterval，你所描述的问题可能会发生，因为它会一直执行函数直到计时器被清除。如果你想要非常谨慎，应该在组件卸载时清除计时器，如果它还没有执行（尽管如果已经执行了，在这种情况下什么也不会发生，因为组件已经卸载并且不会被显示）。 - Rob van Dijk

Answer 3

使用React hooks。它将等待5s，然后渲染此组件。

import React from 'react'

const DeleayComponent = () => {
  const [show, setShow] = React.useState(false)

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setShow(true)
    }, 5000)

    return () => clearTimeout(timeout)

  }, [show])

  if (!show) return null

  return <>OK, Render</>
}

export default DeleayComponent

- Alan

Answer 4

在规定的时间后展示组件最简单的方法是使用条件渲染，代码如下：

constructor(props) {
    super(props);
    this.state = {
        render: false 
    }
}

handleRender = () => {
  setTimeout(() => {
     this.setState({ render : !this.state.render })
  }, 1000);
}

render () {
   return (
          <div>
             <button onClick={handleRender}>Set render to true</button>
             { this.state.render ? <Component /> : null }
          </div>
   )
}

当您点击按钮后，一秒钟后它将设置渲染状态为true，并且 <Component /> 将会显示。

如果您想在组件加载时而不是单击按钮时运行setTimeout，您可以在 componentDidMount 生命周期中这样做：

componentDidMount(){
  setTimeout(() => {
     this.setState({ render : !this.state.render })
  }, 1000);
}

希望您充分了解如何实现组件的渲染方式。

- Mehdi Faraji

Answer 5

使用setTimeout与hook的一种方法是在时间间隔之后设置属性。

import { useState, useEffect } from "react";

const BotResponse = () => {

......

const [botMessage, setBotMessage] = useState('');

// function called from some user interaction
const botResponse = (msg) => {
   setTimeout(function() {
      setBotMessage(msg);
   }, 500);
};

useEffect(() => {
    console.log("bot msg... " + botMessage);

    // display the bot message

}, [botMessage]); // listening to a change on this property
}

- msanjay