更新记录

1.0.6（2021-07-06） 下载此版本

初始化

平台兼容性

CountDown

JavaScript 高精度倒计时。

前言

秒杀活动中，我们需要高精度的秒杀倒计时来满足需求。使用本地客户端时间计时会面临客户端时间不准确的问题，使用服务端时间计时会面临多实例倒计时时，请求接口难以管理的问题。因而我开发了这款高精度的秒杀倒计时，有效解决了问题。

特点

• 计时时间精确。利用 setTimeout 递归实现，不受线程干扰滞后执行。
• 多种计时模式。三种倒计时模式，根据需求自由选择。
• 计时器合并基于 TimeoutInterval 项目。设置上百、上万、上亿个倒计时，都不会卡顿

查阅文章: 写个倒计时？

安装

npm i @xdoer/countdown

使用

使用本地时间倒计时

本地倒计时利用递归 setTimeout ，不断修正计时时间来进行倒计时，简单易用，性能可靠。

import { CountDown } from '@xdoer/countdown';

const date = new Date();
date.setHours(date.getHours() + 1);

new CountDown({
  endTime: date.getTime(),
  onStep({ d, h, m, s }) {
    console.log(`${d}天${h}时${m}分${s}秒`);
  },
  onEnd() {
    console.log('finished');
  },
});

使用服务端修正倒计时

支持间歇拉取远程服务器时间，来不断修正倒计时。

import { CountDown, CountDownManager } from '@xdoer/countdown';

const manager = new CountDownManager({
  debounce: 1000 * 3,
  getRemoteDate,
});

new CountDown({
  endTime: Date.now() + 1000 * 100,
  onStep({ d, h, m, s }) {
    console.log(`${d}天${h}时${m}分${s}秒`);
  },
  onEnd() {
    console.log('finished');
  },
  manager,
});

// 该方法中需要开发者自己请求接口，返回服务器时间
async function getRemoteDate() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(Date.now());
    }, 3000);
  });
}

本地时间矫正

使用本地时间进行倒计时，会面临客户端时间与服务端时间不同步的问题，对于一些接口加密、秒杀场景来说，会有一些意想不到的 bug, 常规做法是将服务器时间与本地时间偏移量存到本地，再进行一些关于时间的操作。

import { CountDown } from '@xdoer/countdown';

new CountDown(
  {
    endTime: Date.now() + 1000 * 100,
    onStep({ d, h, m, s }) {
      console.log(`${d}天${h}时${m}分${s}秒`);
    },
    onEnd() {
      console.log('finished');
    },
  },
  () => {
    return Date.now() + offsetTime;
  }
);

停止计时

const timer = new CountDown({});

timer.clear();

配置

CountDown 倒计时配置项

传入 manager 时，会使用服务端时间不断修正计时器。不传 manager 时，使用本地时间，利用 setTimeout 递归进行倒计时。

CountDownManager 倒计时实例接口请求管理器

参考

可以详细的讲一下平时网页上做活动时的倒计时是怎么实现的吗？