setTimeout 实现计时器

247 阅读1分钟

用setTimeout实现计时器的逻辑:

  • 设置计时时长。
  • 获取起始时间戳。
  • 计算终止时间戳(起始时间戳+计时时长)。
  • 通过setTimeout不断获取现在的时间戳,通过终止时间戳与现在时间戳的差值得到剩余时间的时间戳。
  • 对剩余时间的时间戳进行计算得到时:分:秒:毫秒。 注意事项:
  • 之所以用时间戳的形式是因为“通过setTimeout函数每1000ms减少1s”这种方式计时不够准确。时间戳的时间是准确的。
  • 需要对时间戳进行类型转换,通过+、Number()等方式。否则会出现NaN的问题。
  • 需要判断剩余时间的时间戳是否>=0,因为会存在负数的情况(现在的时间戳在终止时间戳之后),若大于0,需要设置时分秒均为0,而后clearInterval。 另外一个逻辑:
  • 获取起始时间戳。
  • 设置计时时长。
  • 通过setTimeout不断获取现在的时间戳,然后与其实时间戳相减。获取的这个差值代表已经过去的时间毫秒数,再用计时时长减去已经过去的时间毫秒数。就是剩下的时间。
  • 对剩余时间的时间戳进行计算得到时:分:秒:毫秒。