关于前端在vue中实现‘距离某个时间点的倒计时’问题：设置了间隔计算时间，刚开始有停顿。

//函数接受一个结束时间，单位为毫秒，算出当前距离结束时间点的时间，输出一个对象
//输出示例：{
//         hourNum: '12',
//         minuteNum: '13',
//         secondNum: '14',
//        }

function getSurplusDate(endTime) {
  let beginTime = +new Date() / 1000
  endTime = endTime / 1000
  if (endTime > beginTime) {
    let surplusTime = endTime - beginTime
    let hourNum = Math.floor(surplusTime / (1 * 60 * 60))
    let minuteNum = Math.floor((surplusTime % (1 * 60 * 60)) / 60)
    let secondNum = Math.floor(surplusTime % 60)

    hourNum = hourNum < 10 ? '0' + hourNum : hourNum.toString()
    minuteNum = minuteNum < 10 ? '0' + minuteNum : minuteNum.toString()
    secondNum = secondNum < 10 ? '0' + secondNum : secondNum.toString()

    return {
      hourNum: hourNum,
      minuteNum: minuteNum,
      secondNum: secondNum,
    }
  }
}

    //把时间分割成数组传给数据层。这里可根据业务需求灵活处理，
    //因为我这里设计要求每个小框放一个数字
    getCountDown(endTime) {
      let surplusTime = getSurplusDate(endTime)
      this.hour = surplusTime.hourNum.split('')
      this.minute = surplusTime.minuteNum.split('')
      this.second = surplusTime.secondNum.split('')
    },

      this.timer = setInterval(
        this.getCountDown
        1000, //每一秒调用一次
        ‘1667541010000’ //设置的结束时间
      )

上面代码就是实现倒计时，这样看起来没什么问题，每隔1秒计算当前时间距离结束时间的剩余时间，然后把值传给数据层。但是刚开始进入页面，需要立即看到开始倒计时，而我们的setInterVal设置隔1秒执行一次，也就是说，计算剩余时间的函数是在刚进入页面一秒之后才执行第一次，显然与我们的需求有偏差。

那怎么解决呢？最容易想到的方法就是，在setInterVal前面先掉用一次计算剩余时间的函数，这个方法也可以，但有没有更‘漂亮’的方法呢？

看下面加的代码和上面代码的区别！

 我们只需在执行getCountDown结束地时候把它自身return出去。在setInterVal执行的时候，立即执行一次getCountDown，然后getCountDown会把它自身return出来当成setInterVal的第一个参数。