Javascript 如何在第一次播放声音时才出现假值后才出现真值

我有包含动态布尔值的个人数据。该值是自动生成的，每次都可以为真或假

网页每5秒获取一次数据并进行渲染。如果每个人的值为假，则播放声音

代码如下：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Sound from './Mp3';

const data = [
  {
    id: '1',
    name: 'Peter',
    value: true
  },
  {
    id: '2',
    name: 'John',
    value: false
  }
];

class App extends Component {
  state = {
    results: [],
  }

  componentDidMount() {
    this.getData()
    // get data every 5 sec
    setInterval(this.getData, 5000);
  }

  getData = () => {
    // generate random value
    data[0].value = Math.random() >= 0.5;
    data[1].value = Math.random() >= 0.5;

    // set results state to data
    this.setState({ results: data });

    // condition if John or Peter value is false
    if (data.some(d => d.value === false)) {
      var audio = new Audio(Sound);
      // play a sound
      audio.play();
    }
  }

  render() {
    const { results } = this.state;
    return (
      <div>
        {results.map(item => {
          return (
            <div key={item.id}>
              <div>
                Name: {item.name}
              </div>
              <div>
                Value: {item.value.toString()}
              </div>
              <br />
            </div>
          )
        })}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

您可以使用一种“断路器”，它跟踪其状态以及是否启用。跳闸后，它会等待一段时间，然后重新启用自己

下面的代码演示了以下内容

• 从

  true

  切换到

  false

  执行

  操作

  回调
• 继续脉冲

  false

  不会重复此操作
• 切换到

  true

  ，然后等待比

  超时时间更长的时间，然后再次执行
  操作
  回调

功能TF断路器（超时、动作）{
this.state=null；
this.enabled=true；
this.valueChange=函数（newValue）{
如果（this.enabled）{
if（this.state&&！newValue）{
动作（）；
this.enabled=false；
setTimeout（（）=>this.enabled=true，超时）；
}
}
this.state=newValue；
}
}
var cb=新的TF断路器（5000，（）=>console.log（“播放声音”）；
cb.价值变化（真实）；
cb.价值变更（假）；
cb.价值变化（真实）；
cb.价值变更（假）；
cb.价值变化（真实）；
setTimeout（（）=>cb.valueChange（false），6000）您需要在另一个对象的getData函数外部跟踪每个用户以前的值，然后将以前的值与某些对象内部的新值进行比较

  state = {
    results: []
  }

  const previousResults = {};

  componentDidMount() {
    this.getData()
    // get data every 5 sec
    setInterval(this.getData, 5000);
  }

  getData = () => {
    // generate random value
    data[0].value = Math.random() >= 0.5;
    data[1].value = Math.random() >= 0.5;

    // set results state to data
    this.setState({ results: data });

    // condition if user value is false & previous result for user was not false
    if (data.some(d => (d.value === false) && (this.previousResults[d.id] !== false))) {
      var audio = new Audio(Sound);
      // play a sound
      audio.play();
    }

    data.forEach((item) => {
      this.previousResults[item.id] = item.value;
    });
  }

第一种情况-John有一个真值，但您的要求是使用上面的代码
，如果每个人的值为假，则每次都会播放声音  state = {
    results: []
  }

  const previousResults = {};

  componentDidMount() {
    this.getData()
    // get data every 5 sec
    setInterval(this.getData, 5000);
  }

  getData = () => {
    // generate random value
    data[0].value = Math.random() >= 0.5;
    data[1].value = Math.random() >= 0.5;

    // set results state to data
    this.setState({ results: data });

    // condition if user value is false & previous result for user was not false
    if (data.some(d => (d.value === false) && (this.previousResults[d.id] !== false))) {
      var audio = new Audio(Sound);
      // play a sound
      audio.play();
    }

    data.forEach((item) => {
      this.previousResults[item.id] = item.value;
    });
  }