在JavaScript中准确记录用户键入的时间差？

我试图记录用户输入的精确时差，逐字重播。我想在React with

setTimeout

函数中执行此操作，而回放文本不是一个接一个，但这是一种预期行为，但我希望像队列系统一样一个接一个

请不要推荐任何插件

还不清楚吗

代码

import React，{Component}来自“React”
类记录器扩展组件{
状态={
正文：“，
viewText:[]，
类型间隔：0，
键入文本：[]，
旧时间戳：0，
文本输入：“”，
延迟时间：0，
重播：[]
};
全局时间=0
handleTextArea=e=>{
这是我的国家({
text输入：e.target.value
});
};
recordUserTyping=e=>{
这是我的国家({
oldTimestamp:e.timeStamp
});
让timeDiff=e.timeStamp-this.state.oldTimestamp；
设key=e.key
让有效载荷={
钥匙
时间差
};
这是我的国家({
typingText:[…this.state.typingText，有效负载]，
});
};
_startReplay=（i，数据）=>{
设currentTimeDiff=data.timeDiff；
返回setTimeout（（）=>{
这是我的国家({
replay:[…this.state.replay，data.key]
})
}，currentTimeDiff）
};
startReplay=e=>{
返回this.state.typingText.map（（数据，i）=>{
返回此。\u开始播放（i，数据）
})
};
播放录制=（）=>{
返回此.state.replay.map（数据=>{
返回数据
})
};
render（）{
console.log（this.state.replay，“state Changhe”）；
返回(
开始
{this.playRecorded（）}

)
}
}
导出默认记录器；

---

希望我能得到一些帮助？

在

startReplay

中，您正在同时执行一系列

setTimeout

调用，这些调用的延迟是各种

currentTimeDiff

现在，

currentTimeDiff

被定义为

e.timeStamp-this.state.oldTimestamp

，它是相对于上一个按键的时间差

这意味着您实际上是在首先重放“最快”的按键。 要解决此问题，请等待上一个

setTimeout

完成，然后再执行队列中的下一个

最后，将

0

设置为第一次按键的等待时间

recordUserTyping = e => {
  this.setState({
    oldTimestamp: e.timeStamp
  });
  // NOTE HOW timeDiff === 0 FOR THE FIRST EVENT
  let timeDiff = this.state.oldTimestamp
   ? e.timeStamp - this.state.oldTimestamp
   : 0;
  let key = e.key
  let payload = {
    key,
    timeDiff
  };
  this.setState({
    typingText: [...this.state.typingText, payload],
  });

};

_startReplay = (i,data) => {

    let currentTimeDiff = data.timeDiff;

    return setTimeout(() => {
        this.setState({
            replay:[...this.state.replay,data.key]
        });
        if (i+1 < this.state.typingText.length) {
          this._startReplay(i+1, this.state.typingText[i+1]);
        }
    },currentTimeDiff)

};

startReplay = e => {
    if (this.state.typingText.length === 0) return;
    return this._startReplay(0,this.state.typingText[0]);
};

recordUserTyping=e=>{
这是我的国家({
oldTimestamp:e.timeStamp
});
//注意第一个事件的timeDiff==0
让timeDiff=this.state.oldTimestamp
？e.timeStamp-this.state.oldTimestamp
: 0;
设key=e.key
让有效载荷={
钥匙
时间差
};
这是我的国家({
typingText:[…this.state.typingText，有效负载]，
});
};
_startReplay=（i，数据）=>{
设currentTimeDiff=data.timeDiff；
返回setTimeout（（）=>{
这是我的国家({
replay:[…this.state.replay，data.key]
});
if（i+1<此.state.typingText.length）{
this._startReplay（i+1，this.state.typingText[i+1]）；
}
}，currentTimeDiff）
};
startReplay=e=>{
if（this.state.typingText.length==0）返回；
返回此。_startReplay（0，this.state.typingText[0]）；
};

---

有关完整的工作示例，请参见

录制或重播时是否有问题？要进行录制，您可以检查：

recordUserTyping = e => {
  this.setState({
    oldTimestamp: e.timeStamp
  });
  // NOTE HOW timeDiff === 0 FOR THE FIRST EVENT
  let timeDiff = this.state.oldTimestamp
   ? e.timeStamp - this.state.oldTimestamp
   : 0;
  let key = e.key
  let payload = {
    key,
    timeDiff
  };
  this.setState({
    typingText: [...this.state.typingText, payload],
  });

};

_startReplay = (i,data) => {

    let currentTimeDiff = data.timeDiff;

    return setTimeout(() => {
        this.setState({
            replay:[...this.state.replay,data.key]
        });
        if (i+1 < this.state.typingText.length) {
          this._startReplay(i+1, this.state.typingText[i+1]);
        }
    },currentTimeDiff)

};

startReplay = e => {
    if (this.state.typingText.length === 0) return;
    return this._startReplay(0,this.state.typingText[0]);
};