JS计时器

最近项目中用到一个功能。发送短信后要有个倒计时提示。最开始直接写到代码里了，其它地方也要用，就想到了重构。

核心代码如下：

1.先接受对象实例化时传入的相应数据。

2.定义对象相应的方法。启动方法、结束方法、定时执行的方法（判断是否时间用完，用完调用结束方法。否则继续。）。

// 计时器开关。
var timerSwitch = false;

function Timer(fun1, times, delay) {
    this.fun1 = fun1;
    this.times = times;
    this.back = times;
    this.delay = delay;
};

Timer.prototype = {
    constructor: Timer,
    intervalId: -1,
    run: function () {
        if (timerSwitch)return;
        timerSwitch = true;
        this.fun1(this);
        this.intervalId = setInterval(this._fun, this.delay, this);
    },
    close: function() {
        window.clearInterval(this.intervalId);
        this.times = this.back;
        this.fun1(undefined);
        timerSwitch = false;
    },
    _fun: function(para) {
        para.times = para.times - 1;
        para.fun1(para);
        if (para.times == 0) {// 最开始我写的是times==1，但发现走到2s的时候1s没有。最后跟好基友分析来分析去才知道1s显示了，不过随即调用了close方法清空了数据。而且还少显示了一秒，然后定为0。看图
            para.close();
            return;
        }
    }
};

调用的时候很简单。传入要执行的函数f1（处理显示），执行的时间，间隔时间1000毫秒。

实例化计时器对象，然后调用run方法。

                $("#ttt").click(function() {
                    $(this).button("disable");
                    var timer = new Timer(f1, 5, 1000);
                    timer.run();
                });

f1种传入了计时器对象，里面有计时器当前时间，可以展示出来。通过对象是否存在来判断时间是否已结束。

            function f1(timer) {
                var res = "";
                if (!timer) {
                    $("#ttt").button("enable");
                    $("#ttt").val("重新发送");
                } else {
                    res = timer.times+"s";
                }
                $("#t1").html(res);
            }

DEMO版本在RunJS上，套了jquerymobile模板。

点击打开链接

还是有些简陋。感觉还有些地方写的有问题。后续慢慢改进。