javascript - 计算流数据集的时间差

Question

我有以下函数根据来自另一个组件的流式 SignalR 数据呈现一行:

let prev
let next

renderRow = () = {
    this.props.incomingData.map(item => {
        return (
            <tr>
                <td>{item.time}</td> //00:00:00 format
                <td>{this.calculateSecondsTaken()}</td> //should show the time difference in seconds
                <td>{item.event}</td>
                <td>{item.message} <br/>{item.outputURL}</td>
            </tr>
        )
    })
}

我试图通过从以前的时间(在该行中)减去当前时间来获取基于 item.time 属性值的每个数据行的时间差。

//calculates the difference between the previous and the incoming (next) time value to give the time taken
//for the current row's data to come in.
calculateSecondsTaken = (prev, next) => {
    next - prev;
}

我知道在上面的函数中它必须是基于时间的前一个和下一个值的某种减法，但我不能完全确定它的逻辑。例如，第一行的区别是什么等等。

编辑: 数据流组件如下

deploymentEventMessageReceived = (item: DeploymentEvent) => {
    let dataset = {
        time: item.UtcNowPrettyText, //this is the time value
        event: item.EventName,
        message: item.Message,
        outputURL: item.OutputUrl
    }
    let newDataArray = this.state.receivedData.concat(dataset);

    this.setState({
        receivedData: newDataArray
    });
}

deploymentEventMessageReceived() 依次在我连接到 SignalR 的函数内部调用。

编辑 2 更新(工作版本):

deploymentEventMessageReceived = (item: DeploymentEvent) => {
  let lastEntryTime;
  newArray = newArray.concat(item);

  if (newArray.length == 1) {
    lastEntryTime = moment(newArray[newArray.length - 1].UtcNowPrettyText)
  } else {
    lastEntryTime = moment(newArray[newArray.length - 2].UtcNowPrettyText)
  }

  timeDiff = moment(item.UtcNowPrettyText).diff(lastEntryTime, "seconds");

  //create new object with the addition of TimeDifference attribute
  let dataset = {
    UtcNowPrettyText: item.UtcNowPrettyText,
    EventName: item.EventName,
    Message: item.Message,
    OutputUrl: item.OutputUrl,
    TimeDifference: timeDiff
  }

  //store it in a new array
  finalDatasetArray = finalDatasetArray.concat(dataset);

  this.setState({
    receivedData: finalDatasetArray
  });
}

数据流组件的 render() 内部

<RenderRow receivedData={this.state.receivedData} />

感谢任何帮助。

Answer 1

我将以这种方式实现时差计算:我跟踪 Date.now()，我不渲染它，但将它保留在每个条目中，以便我可以对其进行数学计算。我不知道您打算如何呈现时差，但我在我的示例中将其放在 this.state 中。

deploymentEventMessageReceived = (item) => {
    let dataset = {
        time: item.UtcNowPrettyText, //this is the time value
        event: item.EventName,
        message: item.Message,
        outputURL: item.OutputUrl,
        date: Date.now()
    }
    let lastEntry = this.state.receivedData[this.state.receivedData.length - 1]
    let timeDifference = dataset.date - lastEntry.date //time in ms
    let newDataArray = this.state.receivedData.concat(dataset);

    this.setState({
        receivedData: newDataArray,
        timeDifference: timeDifference
    });
}

编辑:我个人的实现实际上是将这两个概念分开。我保留 Date.now() 并创建一个不同的函数来实际构建时差数组。永远不知道您以后是否需要 Date.now()，在您的数据中包含一个完整的时间戳更有意义。您不需要立即添加 item。你可以稍后再连接它。我使用对象解构将分配清理作为 2 个单行。

deploymentEventMessageReceived = (item) => {
  let { UtcNowPrettyText, EventName, Message, OutputUrl } = item
  let dataset = { UtcNowPrettyText, EventName, Message, OutputUrl, Date: Date.now() }
  this.setState({receivedData: this.state.receivedData.concat(dataset)})
}

buildTimeDifferences = (entries) => {
  let newArr = []
  for (let i = 0; i < entries.length; i++) {
    if (i !== entries.length - 1) {
      newArr.push(entries[i + 1].Date - entries[i].Date)
    }
  }
  return newArr
}


d = [{Date: 1},{ Date: 2}, {Date: 4}, {Date: 7}]
console.log(buildTimeDifferences(d))