count-it-down-timer v1.0.4

CountItDownTimer

JavaScript High Precision Countdown

Docs

English | 中文

Foreword

In the spike activity, we need a high-precision spike 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 spike countdown timer, which effectively solved the problem.

Features

• High precision
• Unified management of multiple instances
• Flexible configuration of single instance

Installation

npm i count-it-down-timer -S

Usage

import React, { useEffect, useState } from 'react';
import { CountDown, CountDownManager } from 'count-it-down-timer';

async function getRemoteDate() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(Date.now());
    }, 3000);
  });
}

export function Test() {
  const [timer, setTimer] = useState({});

  useEffect(() => {
    const offsetTime = getOffsetTimeBetweenServerAndClient();
    const countDown = new CountDown(
      {
        endTime: Date.now() + 1000 * 100,
        onStep: setTimer,
        onStop() {
          console.log('finished');
        },
        manager: new CountDownManager({
          debounce: 1000 * 3,
          getRemoteDate,
        }),
      },
      () => Date.now() + offsetTime
    );

    return () => {
      countDown.clear();
    };
  }, []);

  return <div>{JSON.stringify(timer)}</div>;
}

multi The code demonstrates the unified management of multiple CountDown instances with a CountDownManager. In this mode, after the manager requests an interface, it will update the latest time of all instances uniformly.

single The code demonstrates that multiple CountDownManager managers manage multiple CountDown instances. This mode is suitable for scenarios with different precision requirements for countdowns. But it is worth noting that there are several managers that will open several setInterval to periodically request the interface to update the instance time.

Configuration

CountDown Configuration Item

when you pass manager into CountDown, it will use server-side time to fix countdown timer.

CountDownManager Configuration Item

Reference

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