English | 中文
JS High Precision Countdown
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.
- Accurate Timing。
- Unified management of multiple instances。
- Flexible configuration of a single instance。
- Combined timer which based on TimeoutInterval
npm i @xdoer/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');
},
});
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);
});
}
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;
}
);
import { CountDown } from '@xdoer/countdown';
const offset = Number.parseInt(localStorage.getItem('offset'));
const countdown = new CountDown({ endTime: Date.now() + 1000 * 100 });
countdown.clear();
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.
Options | Type | Required | Default | Meaning |
---|---|---|---|---|
debounce | number | false | 3000ms | Time correction every few seconds |
getRemoteDate | () => Promise<number> | false | () => Date.now() | Request remote time interface |