Question

我的Jquery：

function myTimer() {
    var sec = 15
    var timer = setInterval(function() { 
    $('#timer').text(sec--);
    if (sec == -1) {
      clearInterval(timer);
      alert('done');
     } 
    }   , 1000);

}

$("#knap").click(function() {
    myTimer();
});

$("#reset").click(function() {
// set timer to 15 sec again.. 
});

我希望在点击#reset时重置计时器。

Answer 1

您需要将“timer”变量保留在下次调用myTimer函数时可用的范围中，以便清除现有间隔并使用新间隔重置它。尝试：

var timer;
functionn myTimer() {
    var sec = 15
    clearInterval(timer);
    timer = setInterval(function() { 
    $('#timer').text(sec--);
    if (sec == -1) {
      clearInterval(timer);
      alert('done');
     } 
    }   , 1000);

}

$("#knap").click(function() {
    myTimer();
});

$("#reset").click(function() {
   myTimer();
});

Answer 2

或者你可以沿着这些方向做点什么：

var myTimer = function(){
    var that = this,
        time = 15,
        timer;
    that.set = function() {
        console.log('setting up timer');
        timer = setInterval(function(){
            console.log('running time: ' + time);
        },1000);
    }
    that.reset = function(){
        console.log('clearing timer');
        clearInterval(timer);
    }
    return that;
}();

并在需要时运行：

myTimer.set（）; myTimer.reset（）;

Answer 3

您可以像这样重新编写myTimer()函数：

function myTimer() {
    var sec, timer = null;

    myTimer = function() {
        sec = 15;
        clearInterval( timer );

        timer = setInterval(function() { 
            $('#timer').text(sec--);
            if (sec == -1) {
              clearInterval(timer);
              alert('done');
            } 
        } , 1000);
    };

    myTimer();
}

现在，无论何时拨打myTimer()，setInterval都会重置。

Answer 4

每次初始化时清除计时器，这样你只需要再次调用该函数来重置计时器：

var timer;

function myTimer(sec) {
    if (timer) clearInterval(timer);
    timer = setInterval(function() { 
        $('#timer').text(sec--);
        if (sec == -1) {
            clearInterval(timer);
            alert('done');
        } 
    }, 1000);
}

$("#knap, #reset").click(function() {
    myTimer(15);
});

FIDDLE

Answer 5

这是一种更符合JS设计方式的方法（作为那些仍然不知道的人的功能语言）。而不是依赖于全局变量，使用闭包：

$("#knap").click(function start()//named callback to bind && unbind:
{
    $(this).unbind('click');//no need to start when started
    $("#reset").unbind('click').click((function(timer)
    {//timer is in scope thanks to closure
       return function()
       {//resets timer
          clearInterval(timer);
          timer = null;
          $('#knap').click(start);//bind the start again
          //alternatively, you could change the start button to a reset button on click and vice versa
       }
    })(setInterval((function(sec)
       {
           return function()
           {
               $('#timer').text(sec--);
               if (sec === -1)
               {
                   $('#reset').click();//stops interval
                   $('#reset').unbind('click');//no more need for the event
                   alert('done');
               }//here's the interval counter: 15, passed as argument to closure
           })(15),1000)));//set interval returns timer id, passed as argument to closure
});

现在我承认这是相当混乱（并且未经测试）但是这样重置事件只有在必要时才可用，并且你没有使用任何全局变量。但关键的是，这就是JS的力量所在：作为第一类对象的函数，将它们作为参数传递并返回值......只是去函数疯狂：）

我也设置了Fiddle

Answer 6

你也可以使用jQuery计时器插件，然后你不需要传递变量。

插件：http://archive.plugins.jquery.com/project/timers

插件示例：http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

jQuery重置setInterval计时器

6 个答案: