cflow-countdown

倒计时脚本

使用说明

使用范例

const raw = { a: 60, b: 120, c: 180 };
const inst = new CountDown(
  raw,
  data => {
    this.cdResult = data;
  },
  {
    immediately: true,
    onSomeEnd: (ids) => {
      console.log('本轮倒计时结束的 >>>', ids)
    },
    onEnd: (ids) => {
      console.log('全部倒计时结束 >>>', ids)
    },
  }
);

Params

参数名	参数意义	必要	默认值
raw	原始数据	true	{}
onTick	每轮倒计时的计算结果，参数为 结算结果，格式如：{ id, num, text }	false	-
options	其他配置项	false	-

Options

属性	含义	类型	默认值	可选值
immediately	初始化时是否直接开始计时	Boolean	true	true/false
interval	倒计时间隔（毫秒）（不合法的值均视为1000ms）	Number	1000	正整数
format	将剩余时间（秒）转化为文本的处理函数	(timeLeft: number) => string
onStart	手动开始倒计时时调用	() => any
onEnd	全部项目倒计时结束时调用（计时器会被清除）	(ids) => any
onPause	手动暂停倒计时时调用
onStop	手动停止倒计时时调用
onSomeEnd	本轮倒计时有结束的数据时调用	(ids) => any

逻辑思路

部分浏览器切换至后台一段时间后会自动休眠，计时器（setInterval 和 setTimeout）被暂停，退出休眠状态时重启计时器。这是浏览器的优化机制，我们并没有什么办法规避。

本脚本采用曲线救国的方式，即：

先计算出本地环境下的倒计时结束时间，那么，每轮 Tick 的剩余时间 = 本地结束时间 - 当前的本地时间相减。

注意： 因为该方法依赖本地时间，在本地时间发生变化时（手动修改、跨时区等），计算结果会不准。因此，本脚本默认倒计时期间本地时间不会被修改。

目前仅支持秒级倒计时，暂不支持毫秒级。

优化方向

1. 大量数据的处理