CountDown 持久化的倒计时类实现

即无视页面是否刷新的倒计时

在线调试：https://codepen.io/ccwq/pen/YvWxRN?editors=0011

• demo优先

var text = document.getElementById("text");
var couterMax = 10000;
text.innerText = 0;
var countDown = new CountDown({
  cacheKey:"cache-key",
  startTime:couterMax,
  stepHandler(value){
    text.innerText = parseInt(value/1000)
  },
  timeupHandler(){
    text.innerText = 0;
  },
  startHandler(){
    text.innerText = couterMax;
  }
})

• 源码

const defaultOptions = {
    timeupHandler   :   function(){},
    resetHandler    :   function(){},
    stepHandler     :   function(timesToTarget){},
    startHandler    :   function(){},

    //倒计时的最大
    startTime       :   60*1000,
    interval        :   1000,

    //用来实现页面刷新后的缓存
    cacheKey        :   ""
}

const CountDown = class{
    constructor(options){
        var m = this;
        m.options = Object.assign({},defaultOptions,options);
        m._state = "stoping";

        /**
         * 当设备时间到达此刻，计时完成
         */
        m._targetTimes;

        //自动进入倒计时状态
        var cacheTargetValue = m.revertTargetValue();
        if(cacheTargetValue && cacheTargetValue>new Date()*1){
            m.start();
        }
    }

    start(){
        var m = this;
        var newTarget = m.options.startTime + new Date()*1;
        if (m.options.cacheKey) {
            var target = m.revertTargetValue();
            if (!target) {
                target = newTarget;
            }else if(new Date() > target) {
                target = newTarget;
            }
            localStorage.setItem(m.options.cacheKey,target);
            m._targetTimes = target;
        }else{
            m._targetTimes = newTarget;
        }
        m.options.startHandler.call(m)
        m._state = "running";
        m._step();
    }

    reset(noTriggerCallback=true){
        var m = this;
        if (m._timeout) clearTimeout(m._timeout);
        if (m.options.cacheKey) localStorage.setItem(m.options.cacheKey,"")
        m._targetTimes  =   undefined;
        m._state        =   "stoping";
        if (!noTriggerCallback) m.options.resetHandler.call(m);
    }


    _step(){
        var m = this;
        var distance = m._targetTimes - new Date()*1;
        m.options.stepHandler.call(m,distance);

        //倒计时已经完成
        if (distance <= 0) {
            m._state == "stoping";
            m.options.timeupHandler.call(m);
        }else{
            m._timeout = setTimeout(function(){
                if (m._state == "running") {
                    m._step();
                }
            },m.options.interval)
        }
    }

    /**
     * 从缓存恢复数据
     * @returns {number}
     */
    revertTargetValue(){
        var m = this;
        if(!m.options.cacheKey) return;
        var value = localStorage.getItem(m.options.cacheKey);
        value = parseInt(value);
        if (isNaN(value)) return;
        return value;
    }
}

export default CountDown;