全栈sport项目之前台遇到的那些坑儿(二)

因为项目也还在不断的敲代码中，所以该系列文章也会持续更新！
项目链接地址： sport项目

1、前端计时器的实现？

前端时间计数，就像手机的计时器一样，点击开始，时间依次增加1s,可以重置定时器。页面显示要求为 这样的格式： ' 00: 00 : 02 ' 这样的形式。如何实现呢？

刚开始没啥思路，然后网上也搜了相应的例子，但是执行的有问题，

正确的转化成时分秒的代码如下：

//util.js
export function formateRunTime(time) {
   let hour = parseInt(time/3600000%24,10);
   let minute = parseInt(time/60000%60,10);
   let seconds = parseInt(time/1000%60,10);
   hour = hour >= 10 ? hour : `0${hour}`;
   minute = minute >= 10 ? minute : `0${minute}`;
   seconds = seconds >= 10 ? seconds : `0${seconds}`;
   return `${hour} ： ${minute} ： ${seconds}`;
}

错误的代码定时器如下：

import { formateRunTime } from './utils.js';
onStart() { //k开始计时
  let time = new Date().getTime();
  this.startTimer = setInterval(() => {
     let nowTime = new Date().getTime();
     let value = nowTime - time;
    let consumeTime = formateRunTime(value);
    this.setState({ consumeTime });
 },1000);
}

onStop() {
  clearInterval(this.startTimer);
}

如上，错误的代码就在定时器执行这里。这里由于js是单线程运行的，所以碰到定时器之类的宏任务时，把它放在任务队列里，等到有空了再去任务队列中取出执行。

所以，本身我们想的是，每隔1s会执行计算，然后依次打印出： 00:00:01,00:00:02 ...

但根据实际情况打印，最开始竟然延迟了3s-4s才执行，而且这个延迟执行的时间还不确定。所以打印出来的就是00:00:03,00:00:04 ...

显然不满足要求！后来脑筋一转，每次计时都会增加1000ms,即设定一个初始的时间为0，每1s循坏执行累加就可以啦，所以正确的代码如下：

//这里省略了部分代码
constructor(props){
   this.state = { consumeTime : '' },
   this.tempTime = 0;
   this.startTimer = null;

}

//计时
countDown() {
  this.tempTime +=1000;**
  const consumeTime = formateRunTime(this.tempTime);**
  this.setState({ consumeTime})**
}

onStart() {
  this.startTimer = setInterval(() => {
     this.countDown();
   },1000);
}

onStop(){
 clearInterval(this.startTimer)
}