javascript - 使用动画和条件迭代数组

Question

我想迭代(使用 setIterval)一个这样的字符串数组:

const colors = ['all', 'red', 'blue', 'green', 'yellow']

结果是:

console.log('all') 
console.log('red')    // after 20 sec
console.log('blue')   // after 10 sec
console.log('green')  // after 10 sec
console.log('yellow') // after 10 sec

但我还必须考虑一个随机数:在迭代期间，我可能想要也可能不想显示该颜色(这与单色有关(red, blue, green, yellow) 不是 all)。这取决于我们可以在这个简化示例中考虑随机数的特定条件:

if(Math.random() >= 0.5)
    showTheColor
else
    doesntShowTheColor

我模拟一个例子:

start animation
  show color all for 20 seconds

coin throw for color red = 0.7
  show color red for 10 seconds

coin throw for color blue = 0.4
  /

coin throw for color green = 0.1
  /

coin throw for color yellow = 0.8
  show color yellow for 10 seconds

show color all for 20 seconds

coin throw for color red = 0.2
  /

coin throw for color blue = 0.3
  /

coin throw for color green = 0.78
  show color green for 10 seconds

coin throw for color yellow = 0.5
  show color yellow for 10 seconds

show color all for 20 seconds

coin throw for color red = 0.6
  show color red for 10 seconds

coin throw for color blue = 0.7
  show color blue for 10 seconds

coin throw for color green = 0.4
  /

coin throw for color yellow = 0.1
  /

show color all for 20 seconds

coin throw for color red = 0.2
  /

coin throw for color blue = 0.1
  /

coin throw for color green = 0.3
  /

coin throw for color yellow = 0.15
  /

// NB: doesn't show color all for 20 seconds because all the previous colors are null. If I showed all for 20 sec, I would have a total of 40 sec of all and that's not what I want
coin throw for color red = 0.5 
  show color red for 10 seconds

这是我的一段代码:

const INTERVAL_ALL = 20 // sec
const INTERVAL_SINGLE = 10 // sec

export class Animation extends React.Component {
  interval = null
  i = -1
  colors: string[]

  async componentDidMount() {
    this.colors = ['all', 'red', 'blue', 'green', 'yellow']
    this.startPlaying()
  }

  startPlaying = () => {
    this.interval = window.setInterval(() => this.updateColor(), INTERVAL * 1000) // which interval?
  }

  // where do I put conditions and how?
  updateColor() {
    this.i = this.i === this.colors.length - 1 ? 0 : this.i + 1
    const color = this.colors[this.i]
    this.doSomethingWithColor(color)
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  doSomethingWithColor(color) {
    console.log(color)
  }

  render() {
    return (...)
  }
}

该代码是一个简化版本，它没有考虑不同类型的时间和条件。我需要帮助

非常感谢

Answer 1

可能您正在寻找这样的东西:

保持相对简单，这里还有一个沙箱:https://codesandbox.io/s/gallant-bardeen-7rxmh

class App extends React.Component {
  state = {
    colors: ["red", "orange", "yellow", "green", "blue"],
    currentColor: "red",
    currentIndex: 0,
    colorWasSkipped: false
  };

  componentDidMount() {
    this.changeColor();
  }

  componentDidUpdate() {
    const { currentIndex, colorWasSkipped } = this.state;

    setTimeout(
      () => {
        this.changeColor();
      },
      currentIndex === 0 && !colorWasSkipped
        ? "20000"
        : colorWasSkipped
        ? 0
        : "10000"
    );
  }

  changeColor = () => {
    const { colors, currentIndex } = this.state;
    const randomNumber = Math.random();

    const newColor =
      currentIndex < colors.length - 1 ? colors[currentIndex + 1] : colors[0];

    const newIndex = currentIndex < colors.length - 1 ? currentIndex + 1 : 0;

    if (randomNumber >= 0.5) {
      console.log(randomNumber + " changed " + newColor);
      this.setState({
        currentColor: newColor,
        currentIndex: newIndex,
        colorWasSkipped: false
      });
    } else {
      console.log(randomNumber + " skip " + newColor);
      this.setState({
        currentIndex: newIndex,
        colorWasSkipped: true
      });
    }
  };

  render() {
    const color = this.state.currentColor;
    return <div style={{ height: "200px", background: `${color}` }} />;
  }
}

如果您有任何问题，请告诉我。如果跳过一种颜色，我们立即尝试一种新颜色，如果它的随机数小于 0.5，我们也跳过它。循环一直持续到我们得到一个大于或等于 0.5 的数字，然后我们显示该颜色 10 秒，除非我们回到索引 0，在那里我们显示该颜色 20 秒。