Question

我很难让倒计时器工作，因为我不知道自己做错了什么。我试图在原型中使用jQuery设置倒数计时器。

到目前为止我看到的主要问题是在setInterval：

_self.counter = setInterval(_self.runTimer(_self),1000);

当我没有通过＆＃34;这个＆＃34;我得到NaN，但是当我做倒计时只发生一次然后停止。

到目前为止，这是我的JSFiddle工作：

http://jsfiddle.net/f9GN7/

提前谢谢。

Answer 1

我修改了一些代码，我将setInterval更改为setTimeout。

var timer_code = function(){
    this.counter;
    this.timeCountDown = 30;
}

timer_code.prototype = {
    init : function(){
        var _self = this;
        $('#start').on('click',function(e){
            _self.setTimer();
        });
    },

    setTimer : function(){
        var _self = this;
        // _self.counter = setInterval(_self.runTimer(_self),1000);
        var timerLoop = function(){
            if(_self.timeCountDown > 0){
                _self.runTimer();
                setTimeout(timerLoop, 1000);
            }
        };
        timerLoop();
    },

    runTimer : function(){
        var _self = this;
        _self.timeCountDown--;
        if(_self.timeCountDown <= 0){
        //    clearInterval(_self.counter);
            $('#timer').html("DONE");
            return;
        }
        $('#timer').html(_self.timeCountDown);
        console.log(_self.timeCountDown);
    }
}

var timer = new timer_code();
timer.init();

http://jsfiddle.net/f9GN7/1/

Answer 2

setInterval获取函数引用作为其第一个参数..

此函数可能不返回函数对象，您刚刚传递的函数调用需要在closure

的scoope中调用

只需进行一些修改即可保存您的代码：

setTimer: function(){
    if(this.counter)
    clearInterval(this.counter); // timer may have already been launched, it may need to be cleared if its value is an integer and is != 0
    this.counter = setInterval(
    (function (ref) {
        return function () {
            ref.runTimer();
        }
    })(this),
    1000);
}

请参阅Fiddle Here

使用jQuery在原型中设置计时器事件

2 个答案: