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模板。

点击打开链接

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