更新记录

1.0.6(2021-07-06)

初始化


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 2.8.3 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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}秒`);
  },
  () {
    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}秒`);
  },
  () {
    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}秒`);
    },
    () {
      console.log('finished');
    },
  },
  () => {
    return Date.now() + offsetTime;
  }
);

停止计时

const timer = new CountDown({});

timer.clear();

配置

CountDown 倒计时配置项

配置项 类型 可选 默认值 含义
endTime number 必选 倒计时的终止时间
interval number 可选 1000ms 计时间隔
onStep ({ d: number, h: number, m: number, s: number}) => void 可选 计时回调
() => void 可选 计时终止回调
manager CountDownManager 可选 倒计时实例管理器

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

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

配置项 类型 可选 默认值 含义
debounce number 可选 3000ms 每隔几秒进行时间矫正
getRemoteDate () => Promise\<number> 可选 () => Date.now() 请求远程时间接口

参考

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问