记录用户在JavaScript中与时间差异完全打字？

Question

我正在尝试用字母记录用户输入的确切时差来重播它。我想在React中使用create or replace trigger xyz_log after insert or update or delete on xyz for each row begin if Inserting then dbms_output.put_line('Row inserted: ' || :new.rowid); elsif Updating then dbms_output.put_line('Row updated: ' || :new.rowid); elsif Deleting then dbms_output.put_line('Row deleted: ' || :old.rowid); end if; end; 函数执行此操作，而重播文本不是一个接一个，但这是一个预期的行为，但我想逐个像队列系统一样

请不要建议任何插件

还不清楚？

代码

setTimeout

希望我会得到一些帮助？

Answer 1

在startReplay中，您正在同时执行一系列setTimeout次呼叫，其延迟是各种currentTimeDiff。

现在，currentTimeDiff被定义为e.timeStamp - this.state.oldTimestamp，这是相对于PREVIOUS keydown的时差。

这意味着您实际上是首先重播“最快”的keydowns。 要解决此问题，请等待上一个setTimeout完成，然后再执行队列中的下一个。

最后，将0设置为第一个keydown的等待时间。

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]);
};

请参阅https://codesandbox.io/s/m752zrx9px了解完整的工作示例