@xdoer/countdown

English | 中文

CountDown

JS High Precision Countdown

Introduction

In some spike activity, we need a high-precision countdown to meet the demand. The use of local client time timing will face the problem of inaccurate client time, and the use of server-side time timing will face the problem that the request interface is difficult to manage when multi-instance countdown is used. So I developed this high-precision countdown timer, which effectively solved the problem.

Features

• Accurate Timing。
• Unified management of multiple instances。
• Flexible configuration of a single instance。
• Combined timer which based on TimeoutInterval

Install

npm i @xdoer/countdown

Usage

Local Countdown

Local countdown uses recursive setTimeout to continuously correct the timing time for countdown, which is easy to use and reliable.

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');
  },
});

Server Countdown

Support intermittently pull the remote server time to continuously correct the countdown.

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,
});

// In this method, the developer needs to request the interface and return the server time
async function getRemoteDate() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(Date.now());
    }, 3000);
  });
}

Fix Local Countdown

Using local countdown, you will face the problem that the client time is not synchronized with the server time. For some interface encryption and spike scenarios, there will be some unexpected bugs. The normal practice is to offset the server time from the local time. Save it locally, and then perform some time-related operations.

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

const offset = Number.parseInt(localStorage.getItem('offset'));

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;
  }
);

Stop Countdown

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

const offset = Number.parseInt(localStorage.getItem('offset'));

const countdown = new CountDown({ endTime: Date.now() + 1000 * 100 });

countdown.clear();

Config

CountDown Options

Options	Type	Required	Default	Meaning
endTime	number	true	none	end of countdown time
interval	number	false	1000ms	interval of countdown
onStep	({ d: number, h: number, m: number, s: number}) => void	false	none	step callback
onEnd	() => void	false	none	end of countdown callback
manager	CountDownManager	false	none	manager of countdown

When the manager is passed in, the server time will be used to continuously modify the timer. Or the local time is used, and the countdown is performed using setTimeout recursively.

CountDownManager Options

Options	Type	Required	Default	Meaning
debounce	number	false	3000ms	Time correction every few seconds
getRemoteDate	() => Promise<number>	false	() => Date.now()	Request remote time interface