倒计时脚本

使用说明

使用范例

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. 大量数据的处理