Javascript 如何在React中的特定功能上添加延迟？

我已经建立了一个石头/布/剪刀反应应用程序。该应用程序运行良好，我只想在CPU必须选择武器（石头/布/剪刀）时增加一些延迟

我希望有一个时间窗口，CPU选择的图像不在屏幕上，而用户的选择立即出现在屏幕上

我试图在compountendimount（）方法中添加一个setInterval（）函数，但没有成功

如何仅在CPU部分添加延迟

事先非常感谢

Main.js

import React from "react"
import Choice from "./Choice"
import TryAgain from "./TryAgain"

import paper from '../images/icon-paper.svg'
import rock from '../images/icon-rock.svg'
import scissors from '../images/icon-scissors.svg'

import './Main.css';

class Main extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            onScreen: true,
            choiceName: '',
            choiceImage: '',
            choiceBorderColor: '',
            choiceExtraBorderColor: '',
            houseChoice: '',
            results:'',
        }
        this.handleClick = this.handleClick.bind(this)
        this.handleTryAgainClick = this.handleTryAgainClick.bind(this)
    }
    
    /******************* setInterval() ******************************/
    componentDidMount() {
        // Call this function so that it fetch first time right after mounting the component
        this.handleClick();
    
        // set Interval
        this.interval = setInterval(this.handleClick, 5000);
    }

    /*function that handles the user choice*/
    handleClick = (choiceName, choiceImage, choiceBorderColor, choiceExtraBorderColor) => () => {
        this.setState({
            onScreen: false,
            choiceName,
            choiceImage,
            choiceBorderColor,
            choiceExtraBorderColor,
        })

        /*function that get a random number between 0 and 2, and set this number to the house index*/
        function getRandomInt(max) {
            return Math.floor(Math.random() * Math.floor(max));
        }
        const index = getRandomInt(3)
        this.setState({
            houseChoice: index
        })
        const results = this.getResults(choiceName, index).toUpperCase()
        this.setState({
            results: results,
        })

    
        if(results === "WIN") {
            this.props.setScore(1)
        } else if (results === "LOSE") {
            this.props.setScore(-1)
        }
        else {
            this.props.setScore(0)
        }
    }

    /*function that get the main logic and the results of the game*/
    getResults(choiceName, houseChoice) {
        if(choiceName === "paper" && houseChoice === 0) {
            return "draw"
        } else if(choiceName === "paper" && houseChoice === 1) {
            return "lose"
        } else if(choiceName === "paper" && houseChoice === 2) {
            return "win"
        }
        if(choiceName === "rock" && houseChoice === 0) {
            return "lose"
        } else if(choiceName === "rock" && houseChoice === 1) {
            return "win"
        } else if(choiceName === "rock" && houseChoice === 2) {
            return "draw"
        }
        if(choiceName === "scissors" && houseChoice === 0) {
            return "win"
        } else if(choiceName === "scissors" && houseChoice === 1) {
            return "draw"
        } else if(choiceName === "scissors" && houseChoice === 2) {
            return "lose"
        }
    }

    /*function that switches the screen and resets the index of the house*/
    handleTryAgainClick() {
        this.setState({
            onScreen: true,
            houseChoice: ''
        })
    }

---

我不确定我的问题是否正确，但是，如果要在渲染上设置延迟，那么在做出选择之前不要渲染。

---

如果应用程序必须在玩家输入后执行某些操作，请使用async Wait异步执行以下操作。

我不确定问题是否正确，但如果要在渲染上设置延迟，则在做出选择之前不要渲染。

---

如果应用程序必须在玩家输入后执行某些操作，请使用async Wait异步执行以下操作。

您需要添加一个状态，该状态不会呈现任何内容。例如，只需将cpu选项设置为4并更新渲染函数。然后您可以添加睡眠功能，如。我做了一些我认为你想要的工作示例
我对代码所做的主要更改是

this.sleep(1500).then(() => {
      const index = getRandomInt(3);
      this.setState({
        houseChoice: index
      });
      const results = this.getResults(choiceName, index).toUpperCase();
      this.setState({
        results: results
      });

      /*****************calling setScore()********************/
      if (results === "WIN") {
        this.props.setScore(1);
      } else if (results === "LOSE") {
        this.props.setScore(-1);
      } else {
        this.props.setScore(0);
      }
    });

在执行超时的

handleClick

中。
在结果页面中，我添加了

this.state.houseChoice === 2 ? (
             /*3*/
              <div
                className="elem-container result-container"
                style={{
                  borderColor: "hsl(349, 71%, 52%)",
                  color: "hsl(349, 70%, 56%)"
                }}
              >
                <img src={rock} className="choice-image" alt="img" />
              </div>
            ) : null

this.state.houseChoice==2？(
/*3*/
)：null

您需要添加一个不呈现任何内容的状态。例如，只需将cpu选项设置为4并更新渲染函数。然后您可以添加睡眠功能，如。我做了一些我认为你想要的工作示例
我对代码所做的主要更改是

this.sleep(1500).then(() => {
      const index = getRandomInt(3);
      this.setState({
        houseChoice: index
      });
      const results = this.getResults(choiceName, index).toUpperCase();
      this.setState({
        results: results
      });

      /*****************calling setScore()********************/
      if (results === "WIN") {
        this.props.setScore(1);
      } else if (results === "LOSE") {
        this.props.setScore(-1);
      } else {
        this.props.setScore(0);
      }
    });

在执行超时的

handleClick

中。
在结果页面中，我添加了

this.state.houseChoice === 2 ? (
             /*3*/
              <div
                className="elem-container result-container"
                style={{
                  borderColor: "hsl(349, 71%, 52%)",
                  color: "hsl(349, 70%, 56%)"
                }}
              >
                <img src={rock} className="choice-image" alt="img" />
              </div>
            ) : null

this.state.houseChoice==2？(
/*3*/
)：null

如果我没弄错的话，也许洛达斯的黛布恩会是你的答案。我已经在我的tic-tac-toe应用程序中使用它来延迟电脑的移动。只需从NPM添加它

npm install lodash —save-dev

然后导入到您的文件中

import {debounce} from 'lodash';

不断地创造一个你从lodash那里调用的去盎司的东西。500是时间，你希望移动延迟多长时间。在这种情况下，它将是0.5s

const debounceComputerMove = debounce(()=>{
  computerMove();
},500);

---

然后，当您想调用computerMove函数时，请调用debounceComputerMove而不是computerMove（）

如果我没弄错，也许lodash的Debounce将为您提供答案。我已经在我的tic-tac-toe应用程序中使用它来延迟电脑的移动。只需从NPM添加它

npm install lodash —save-dev

然后导入到您的文件中

import {debounce} from 'lodash';

不断地创造一个你从lodash那里调用的去盎司的东西。500是时间，你希望移动延迟多长时间。在这种情况下，它将是0.5s

const debounceComputerMove = debounce(()=>{
  computerMove();
},500);

然后，当您要调用computerMove函数时，请调用debounceComputerMove而不是computerMove（）

常量睡眠=（毫秒） 创建一个变量，然后定义时间

常量睡眠=（毫秒）

---

在人类玩家选择一个动作后，在定义的时间内做出一个var，不要立即让CPU选择一个动作。 实现

componentdiddupdate

生命周期功能，并将CPU的选择逻辑移到那里。这也需要移动win逻辑的检查

/*function that handles the user choice*/
handleClick = (
  choiceName,
  choiceImage,
  choiceBorderColor,
  choiceExtraBorderColor
) => () => {
  this.setState({
    onScreen: false,
    choiceName,
    choiceImage,
    choiceBorderColor,
    choiceExtraBorderColor
  });
};

一旦人类玩家选择了一个移动，获得房子的随机移动，但不要立即将状态更新排队，而是使用

setTimeout

在一段时间内进入更新状态

只有当两名玩家都选择了一个移动，但结果尚未计算并存储在状态中时，才检查是否获胜

componentDidUpdate(prevProps, prevState) {
  if (
    prevState.choiceName !== this.state.choiceName &&
    this.state.choiceName
  ) {
    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }
    const index = getRandomInt(3);

    setTimeout(() => {
      this.setState({
        houseChoice: index
      });
    }, 2000);
  }

  if (
    this.state.choiceName &&
    [0, 1, 2].includes(this.state.houseChoice) && // We want 0 to be truthy :)
    !this.state.results
  ) {
    const results = this.getResults(
      this.state.choiceName,
      this.state.houseChoice
    ).toUpperCase();
    this.setState({
      results: results
    });

    /*****************calling setScore()********************/
    if (results === "WIN") {
      this.props.setScore(1);
    } else if (results === "LOSE") {
      this.props.setScore(-1);
    } else {
      this.props.setScore(0);
    }
  }
}

有条件地呈现“等待CPU”UI

---

在人类玩家选择移动后，不要立即让CPU选择移动。 实现

componentdiddupdate

生命周期功能，并将CPU的选择逻辑移到那里。这也需要移动win逻辑的检查

/*function that handles the user choice*/
handleClick = (
  choiceName,
  choiceImage,
  choiceBorderColor,
  choiceExtraBorderColor
) => () => {
  this.setState({
    onScreen: false,
    choiceName,
    choiceImage,
    choiceBorderColor,
    choiceExtraBorderColor
  });
};

一旦人类玩家选择了一个移动，获得房子的随机移动，但不要立即将状态更新排队，而是使用

setTimeout

在一段时间内进入更新状态

只有当两名玩家都选择了一个移动，但结果尚未计算并存储在状态中时，才检查是否获胜

componentDidUpdate(prevProps, prevState) {
  if (
    prevState.choiceName !== this.state.choiceName &&
    this.state.choiceName
  ) {
    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }
    const index = getRandomInt(3);

    setTimeout(() => {
      this.setState({
        houseChoice: index
      });
    }, 2000);
  }

  if (
    this.state.choiceName &&
    [0, 1, 2].includes(this.state.houseChoice) && // We want 0 to be truthy :)
    !this.state.results
  ) {
    const results = this.getResults(
      this.state.choiceName,
      this.state.houseChoice
    ).toUpperCase();
    this.setState({
      results: results
    });

    /*****************calling setScore()********************/
    if (results === "WIN") {
      this.props.setScore(1);
    } else if (results === "LOSE") {
      this.props.setScore(-1);
    } else {
      this.props.setScore(0);
    }
  }
}

有条件地呈现“等待CPU”UI

---

通过延迟CPU选择，您到底希望发生什么@是的，对不起。我的意思是，我希望有一个时间窗口，CPU选择的图像不在屏幕上，而用户的选择立即出现在屏幕上。因此，您需要延迟组件渲染，而不是延迟单击。顺便说一句，你需要使用

setTimeout

，因为

setInterval

做一些完全不同的事情。。。。因此，请阅读有关条件渲染的内容。你的问题不是最小的，所以我不会把所有这些代码都复习一遍，希望你能得到答案。通过延迟CPU的选择，你到底期望发生什么@是的，对不起。我的意思是，我希望有一个时间窗口，CPU选择的图像不在屏幕上，而用户的选择立即出现在屏幕上。因此，您需要延迟组件渲染，而不是延迟单击。顺便说一句，你需要使用

setTimeout

，因为

setInterval

做一些完全不同的事情。。。。因此，请阅读有关条件渲染的内容。你的问题不是最小的，所以我不会把所有这些代码都复习一遍，希望你能得到答案。非常感谢你的回答！有没有办法在你赢/输的部分增加延迟？我的意思是，如果有一种方式，只有当CPU选项出现在屏幕上时，它才会显示出来！假设我们选择h