想要每隔几秒显示不同的文本答案

【问题标题】：Want to display different text every few seconds想要每隔几秒显示不同的文本
【发布时间】：2021-05-31 18:40:40
【问题描述】：

我有这样的问题：

我有一个数据数组，我有一个时间数组。这些是数组：

  const Reps = {
    TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
    ScoreOfMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],
  };

一秒钟后我想显示数字 60，2.5 秒后显示数字 85，所以这些......

这是迄今为止我一直在尝试的代码，但它对我不起作用

import React from "react";

function App() {

  const Reps = {
    TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
    ScoreOfMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],
  };
  const scoreValue = (time, score) => {
    time.forEach((timePoint, i) => {
      setInterval(() => {
        <p>{score[i]}</p>
      }, timePoint * 1000);
    });
  }
  return (
    <div className="App">
      {scoreValue(Reps.TimeOfMove, Reps.ScoreOfMove)}
    </div>
  );
}

export default App;

我想每次显示不同的文字，根据它出现的时间。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这应该可行。

import React, {useEffect, useState} from 'react';
import './App.css';

function App() {
    const [score, setScore] = useState('');

    const Reps = {
        TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
        ScoreOfMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],
    };
    useEffect(() => {
        Reps.TimeOfMove.forEach((time, index) => {
            const interval = setInterval(() => setScore(Reps.ScoreOfMove[index]), time * 1000);
            return () => {
                clearInterval(interval);
            };
        })

    }, [])

    return (
        <div>
            {score}
        </div>
    );
}

export default App;

【讨论】：

【解决方案2】：

尝试创建一个状态 (currentScore) 并在间隔上为其设置值，这是由 forEach 循环和 setInterval 完成的。

import React, { useState } from "react";

function App() {
  const [currentScore, setCurrentStore] = useState(null);
  const Reps = {
    TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
    ScoreOfMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],
  };

  useEffect(() => {
      Reps.TimeOfMove.forEach((time, index) => {
          setTimeout(() => {
              setCurrentStore(Reps.ScoreOfMove[index])
          }, time * 1000)
      })
  },[])

  return (
    <div className="App">
        <p>{currentScore}</p>
    </div>
  );
}

export default App;

【讨论】：

最好在useEffect 内部触发Reps.TimeOfMove.forEach((time, index) => { setTimeout(() => { setCurrentStore(Reps.ScoreOfMove[index]) }, time * 1000) })，这样重新渲染，当状态更新时，我相信不会导致forEach 再次执行。
类似sandbox
我认为是的，我们需要将它包装在 useeffect 中。

【解决方案3】：

这里是 Vanilla JS 中的解决方案，你可以在 React 或你想要的地方申请

这是一个递归解决方案。

const arrs = {
  TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
  ScoreOfMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],  
}

const runTimer = (index) => {
  if (index === arrs.TimeOfMove.length - 1) {
    console.log('Timer is finished!')
    return;
  }
 
  setTimeout(() => {
    console.log(arrs.ScoreOfMove[index]);
    runTimer(index + 1);
  }, arrs.TimeOfMove[index] * 1000)
}

const INDEX_START = 0;

runTimer(INDEX_START);

另外，分享 codepen https://codepen.io/niko20/pen/MWpryRB

如果你想在 DOM 中显示文本“移动分数”，可以使用 ReactJS 的 useState 并在计时器运行时设置分数。

【讨论】：