在 react-native 暂停后重新启动时，计时器会提前几秒钟答案

【问题标题】：Timer jumping several seconds ahead when restarting after pause in react-native在 react-native 暂停后重新启动时，计时器会提前几秒钟
【发布时间】：2021-05-18 01:07:40
【问题描述】：

我有一些逻辑来处理我的 react-native 应用程序中的计时器。现在我正在观察一些奇怪的行为。当我第一次启动计时器时，它会按预期运行。当我单击stop 时，它会显示最后一个值。然后，当我再次单击开始时，它应该获取最后一个值并继续递增。但是，在重新启动时发生的情况是，值会提前几秒钟，然后从那里递增，我不知道为什么。

有四个主要组件：_startTimer()、_stopTimer()、calculateDuration() 和 continueTimer()。

问题似乎发生在 _continueTimer() 运行时，特别是在从该函数中调用 _calculateDuration() 时。

   constructor(props) {
     super(props);
     this.timer = null;
     this.state = {
       duration: props?.duration || '00:00:00',
       startTime: props?.started ? moment(props.started).format('YYYY-MM-DD HH:mm:ss') : null,
       stopTime: props?.stopped ? moment(props.stopped).format('YYYY-MM-DD HH:mm:ss') : null,
     };
   }
   
   async _startTimer() {
     if (this.timer) clearInterval(this.timer);
     
     let stateUpdate = {
       stopTime: null,
     };
     
     if (!this.state.startTime) {
       const newStartTime = moment(Date.serverTime() || Date.now());
       stateUpdate.startTime = newStartTime.format('YYYY-MM-DD HH:mm:ss');
     }
     
     this.setState(stateUpdate, () => {
       this.timer = setInterval(async () => {
         const newDuration = this._calculateDuration();
         this.setState({
           duration: newDuration,
         });
       }, 1000);
       if (this.props.onChange) this.props.onChange(this.state);
     });
   };
   
   _stopTimer() {
     return new Promise((resolve) => {
       if (this.timer) clearInterval(this.timer);
       
       const newStopTime = moment(Date.serverTime());
       this.setState({
         stopTime: newStopTime.format('YYYY-MM-DD HH:mm:ss'),
       }, async () => {
         if (this.props.onChange) await this.props.onChange(this.state);
       });
     });
   };

   _calculateDuration() {
        const startTime = moment(this.state.startTime).valueOf();
        
        const stopTime = this.state.stopTime ? moment(this.state.stopTime).valueOf() : moment().valueOf();

        const duration = moment.duration(stopTime - startTime).asMilliseconds();
        const durationFormatted = moment.utc(duration).format('HH:mm:ss');
        return durationFormatted;
    };
     
    async _continueTimer() {
        if (this.timer) clearInterval(this.timer);
        
        this.setState({
            stopTime: null,
        }, () => {
            this.timer = setInterval(async () => {
                const newDuration = this._calculateDuration();
                this.setState({
                    duration: newDuration,
                });
            }, 1000);
            
            if (this.props.onChange) this.props.onChange(this.state);
        });
    };

【问题讨论】：

这行得通吗？如果可以，您可以标记为已回答，我很感兴趣

标签： reactjs react-native

【解决方案1】：

@muirik 我刚刚尝试跟踪调用链，我认为正在发生的事情是在停止然后重新启动之后，调用_startTimer() 而不是_continueTimer()。要么是这样，要么是你没有在_continueTimer() 方法中重置state.Starttime 的值。无论哪种方式，原因都是一样的：

以下示例

如果您使用全新的计时器：

Start button is hit, start time is 12:00:00 (For sake of argument)

等待 1 秒

interval happens, duration is calculated as 12:00:01 - 12:00:00 = 0:0:01

按下停止

StopTimer happens,stop time is 12:00:01 , duration is 0:0:01

等待 5 秒

再次按下开始按钮（假设调用了开始而不是继续）

start sets state.stopTime to null, then skips the following:

if (!this.state.startTime) {
   const newStartTime = moment(Date.serverTime() || Date.now());
   stateUpdate.startTime = newStartTime.format('YYYY-MM-DD HH:mm:ss');
 }

start time is still 12:00:01

1 秒过去了 - 时间是 12:00:07

Time interval gets called, difference is calculated. start time is 12:00:01, current time is 12:00:07 , duration goes from 0:0:01 to 0:0:07

我的建议是查看调用这些方法的位置，并将开始时间状态设置为“continueTime”上的当前时刻

【讨论】：